Saltar al contenido principal

TdnWeeklyScheduleSelector

Paquete: @tiendana/ngx-core/forms

Selector visual de horarios semanales con rangos de tiempo por día. Ideal para configurar disponibilidad, horarios de atención o calendarios de trabajo.

Selector y clase del host

La clase del componente es TdnWeeklyScheduleSelectorComponent, pero su selector es tdn-weekly-selector y la clase del host es tdn-week-selector (con la que empiezan las clases internas tdn-week-selector__*). No existe un selector tdn-weekly-schedule-selector.

<tdn-weekly-selector tdnControl formControlName="schedule" />

Características​

  • ✅ Selección visual de días: Interfaz intuitiva con botones para cada día de la semana
  • ✅ Rangos de tiempo por día: Cada día tiene su propio selector de horario (TdnInputTime)
  • ✅ Aplicar a todos: Con dos o más días, un selector general y un botón copian ese rango a todos los días seleccionados
  • ✅ Día completo al seleccionar: Cada día recién activado recibe 00:00 - 23:59:59.999
  • ✅ Responsive: Adaptado a pantallas móviles
  • ✅ Días abreviados: L, M, X, J, V, S, D para español
  • ✅ Integración completa: Compatible con Reactive Forms

API​

Inputs​

PropiedadTipoDefaultDescripción
settingsWeeklyScheduleSelectorSettingsVer configuraciónHorario por defecto e íconos

Atributos HTML​

AtributoTipoDescripción
tdnControlDirectiveConecta con FormControl y activa estados visuales
formControlNamestringNombre del control en un FormGroup
[formControl]FormControlReferencia directa a un FormControl

Configuración​

Interfaz WeeklyScheduleSelectorSettings
interface WeeklyScheduleSelectorSettings {
    defaultSchedule?: TimeInputValues;  // Rango del selector general y de "Aplicar a todos" (default: 06:00 - 18:00)
    icons?: Partial<WeeklyScheduleSelectorIcons>;
    translations?: Partial<WeeklyScheduleSelectorTranslations>;
}

interface WeeklyScheduleSelectorIcons {
    schedule: string | SafeHtml;   // Ícono junto al selector general de horario
    clear: string | SafeHtml;      // Ícono del botón de quitar cada día
}

interface WeeklyScheduleSelectorTranslations {
    applyToAll: string;   // Texto del botón (default: 'Aplicar a todos')
}

interface TimeInputValues {
    from: {
        hour: number;       // 0-23
        minute: number;     // 0-59
        second?: number;    // 0-59
        millisecond?: number; // 0-999
    };
    to: {
        hour: number;
        minute: number;
        second?: number;
        millisecond?: number;
    };
}

interface WeeklySchedule {
    [day: string]: TimeInputValues | null;  // Keys: '1'-'7' (Lunes-Domingo)
}

Valores predeterminados​

{
    defaultSchedule: {
        from: { hour: 6, minute: 0, second: 0, millisecond: 0 },
        to: { hour: 18, minute: 0, second: 0, millisecond: 0 }
    },
    icons: { schedule: TDN_ICON_SCHEDULE, clear: TDN_ICON_CLEAR },
    translations: { applyToAll: 'Aplicar a todos' }
}

Valor del control​

WeeklySchedule usa las claves '1' (lunes) a '7' (domingo). Los botones de día son L M X J V S D. Los días no seleccionados no aparecen en el objeto. No hay outputs: el valor se lee del control. Los selectores de hora internos usan { clear: false }.

Ejemplos y Demos​

Uso Básico​

Cargando demo...
Ver código

Con Valor Inicial​

Cargando demo...
Ver código

Con Horario General Personalizado​

Cargando demo...
Ver código

Con Validación Required​

Cargando demo...
Ver código

Validación Personalizada (Mínimo de Días)​

Cargando demo...
Ver código

Validación de Horario Laboral​

Cargando demo...
Ver código

Ejemplo Completo​

Cargando demo...
Ver código

Funcionalidades Avanzadas​

Estructura de Datos​

El componente maneja un objeto WeeklySchedule donde las claves son strings del 1 al 7 (Lunes a Domingo):

{
    '1': {  // Lunes
        from: { hour: 8, minute: 0, second: 0, millisecond: 0 },
        to: { hour: 17, minute: 0, second: 59, millisecond: 999 }
    },
    '2': {  // Martes
        from: { hour: 8, minute: 0, second: 0, millisecond: 0 },
        to: { hour: 17, minute: 0, second: 59, millisecond: 999 }
    }
    // ... otros días
}

Día completo al seleccionar​

Al activar un día, el componente le asigna el día completo: de 00:00:00.000 a 23:59:59.999. No usa defaultSchedule en ese momento.

Selector general y «Aplicar a todos»​

Cuando hay dos o más días seleccionados aparece una fila general con un selector de hora (con el ícono schedule a su lado) y el botón «Aplicar a todos». El selector está enlazado a defaultSchedule, que arranca en 06:00 - 18:00 (o el valor de settings.defaultSchedule). Al pulsar el botón, ese rango del selector general se copia a todos los días seleccionados. No copia el rango del primer día.

Interacción con TdnInputTime​

Cada día usa internamente TdnInputTime para la selección de rangos horarios, heredando todas sus funcionalidades (scroll, formato 12h, etc.).

Buenas Prácticas​

✅ Hacer​

  • Validar mínimo de días cuando sea necesario
  • Definir un defaultSchedule razonable: es el rango que «Aplicar a todos» copia a los días
  • Validar duración mínima por día en escenarios críticos
  • Usar validadores personalizados para reglas de negocio
  • Combinar con tdnErrors para mensajes claros

❌ Evitar​

  • Omitir validación cuando la configuración es crítica
  • Usar horarios por defecto muy restrictivos
  • Validar solo en submit (validar en tiempo real)
  • Permitir horarios sin sentido (ej: inicio > fin)

Accesibilidad​

  • ✅ Label asociado con <label> dentro de <tdn-form-element>
  • ✅ Navegación por teclado en selectores de tiempo
  • ✅ Estados visuales para días seleccionados
  • ✅ Mensajes de error claros
  • ✅ Botones con íconos y textos descriptivos

Personalización Avanzada​

Token de Configuración Global​

Puedes configurar valores por defecto para todos los componentes TdnWeeklyScheduleSelector usando el token TDN_WEEKLY_SCHEDULE_SELECTOR_DEFAULT_SETTINGS. Un proveedor reemplaza el objeto completo: entrega defaultSchedule, icons y translations.

Configuración Global
import { ApplicationConfig } from '@angular/core';
import { TDN_WEEKLY_SCHEDULE_SELECTOR_DEFAULT_SETTINGS } from '@tiendana/ngx-core/forms';

export const appConfig: ApplicationConfig = {
    providers: [
        {
            provide: TDN_WEEKLY_SCHEDULE_SELECTOR_DEFAULT_SETTINGS,
            useValue: {
                defaultSchedule: {
                    from: { hour: 9, minute: 0, second: 0, millisecond: 0 },
                    to: { hour: 18, minute: 0, second: 59, millisecond: 999 }
                },
                icons: {
                    schedule: '<i class="material-symbols-rounded">schedule</i>',
                    clear: '<i class="material-symbols-rounded">close</i>'
                },
                translations: {
                    applyToAll: 'Aplicar a todos'
                }
            }
        }
    ]
};

También puedes configurar a nivel de módulo o componente:

@Component({
    providers: [
        {
            provide: TDN_WEEKLY_SCHEDULE_SELECTOR_DEFAULT_SETTINGS,
            useValue: { /* tu configuración */ }
        }
    ]
})
export class MyComponent { }

Componentes Relacionados​