Schedule
El componente ESchedule organiza eventos temporales en vistas de calendario y recursos. Combina navegación por fecha, espacios seleccionables, intervalos interactivos y renderizado extensible de eventos para flujos de planificación.
Uso y diseño
Empieza con una fecha mediante v-model y proporciona los espacios y eventos que se mostrarán. Cada evento se vincula a un espacio mediante entityId; el schedule se encarga de la navegación y la distribución temporal.
Sin barra de herramientas
Usa la prop hide-toolbar cuando la navegación y los controles del schedule se proporcionen desde otra parte de la interfaz.
Slots
Personaliza regiones específicas sin reemplazar el layout del schedule. #toolbar controla la navegación, #event controla el contenido de eventos y #empty-slot controla los intervalos disponibles.
Slot toolbar
Crea navegación de periodos personalizada con las etiquetas localizadas y los callbacks expuestos por el scope del slot.
Slot event
Cambia la jerarquía de información dentro de los eventos y conserva un control interactivo real con texto de apoyo legible.
Slot empty-slot
Convierte los intervalos disponibles en acciones explícitas de creación. Mantén cada reemplazo accesible por teclado y proporciona un nombre accesible significativo.
Elige un intervalo disponible para crear un evento.
Integración
Combina ESchedule con EDialog para crear y editar eventos en contexto. Los intervalos vacíos proporcionan la fecha y hora iniciales; los eventos existentes proporcionan el modelo que se actualizará.
Accesibilidad
El schedule expone una región con nombre y renderiza los eventos e intervalos vacíos predeterminados como botones nativos. Conserva esa semántica de teclado en slots personalizados, anuncia los resultados del flujo y permite que los dialogs restauren el foco al control de origen.
Usa Tab para alcanzar eventos e intervalos disponibles; después pulsa Enter o Espacio para activarlos.
Referencia API
Consulta las props, los slots y los eventos emitidos públicos verificados de ESchedule.
Props de ESchedule
| Propiedad | Tipo | Por defecto |
|---|---|---|
| modelValue | Date | required |
Define la fecha base de la vista activa. | ||
| view | ScheduleView | ScheduleView.Calendar |
Selecciona el modo calendario o recursos. | ||
| scale | CalendarScale | CalendarScale.Day |
Selecciona la escala diaria o semanal mientras el modo calendario está activo. | ||
| spaces | ScheduleSpace[] | [] |
Proporciona los recursos o espacios disponibles en el schedule. | ||
| selectedSpace | ScheduleSpace | undefined | undefined |
Define el espacio activo utilizado para filtrar eventos del calendario. | ||
| events | ScheduleEvent[] | [] |
Proporciona los eventos renderizados en el rango visible de fechas y espacios. | ||
| resourceColumns | string | number | undefined |
Limita las columnas de recursos visibles por página. | ||
| loading | boolean | false |
Marca el schedule como ocupado, desactiva la interacción y muestra progreso lineal. | ||
| color | string | 'primary' |
Define el color semántico de los controles del schedule. | ||
| lng | suportedLng | global locale |
Define el locale utilizado por las etiquetas y los formatters del schedule. | ||
| rowHeight | string | number | '97' |
Define la altura visual de cada intervalo temporal. | ||
| stickyTopHeader | string | number | 0 |
Define el offset superior del encabezado sticky del schedule. | ||
| step | number | 3600 |
Define la duración de cada intervalo en segundos. | ||
| start | number | 0 |
Define la hora inicial visible en segundos desde medianoche. | ||
| end | number | 86400 |
Define la hora final visible en segundos desde medianoche. | ||
| elevation | ElevationLevel | undefined |
Aplica un preset de elevación del framework al contenedor del schedule. | ||
| eventElevation | ElevationLevel | 'none' | 'md' |
Aplica un preset de elevación del framework a los wrappers de eventos o lo elimina explícitamente. | ||
Slots
| Propiedad | Tipo | Por defecto |
|---|---|---|
| toolbar | ScheduleToolbarSlotProps | - |
Reemplaza la toolbar superior y expone estado localizado junto con callbacks de navegación. | ||
| event | { event: ScheduleEvent } | - |
Reemplaza el contenido del evento y expone el evento actual. | ||
| empty-slot | { data: ScheduleSlotEvent } | - |
Reemplaza un intervalo disponible y expone sus datos resueltos de tiempo y espacio. | ||
Eventos
| Propiedad | Tipo | Por defecto |
|---|---|---|
| update:modelValue | Date | - |
Se emite cuando la navegación del schedule cambia la fecha base. | ||
| update:view | ScheduleView | - |
Se emite al cambiar entre los modos calendario y recursos. | ||
| update:scale | CalendarScale | - |
Se emite al cambiar entre las escalas diaria y semanal. | ||
| update:selected-space | ScheduleSpace | undefined | - |
Se emite cuando cambia el espacio activo. | ||
| click:header | { view, scale?, date, entityId? } | - |
Se emite al activar un encabezado de día o recurso. | ||
| click:event | { data: ScheduleEvent, nativeEvent: MouseEvent } | - |
Emite el evento seleccionado y el evento click nativo. | ||
| click:empty-slot | { data: ScheduleSlotEvent, nativeEvent: MouseEvent } | - |
Emite el intervalo vacío seleccionado y el evento click nativo. | ||