Schedule
The ESchedule component organizes time-based events across calendar and resource views. It combines date navigation, selectable spaces, interactive time slots, and extensible event rendering for scheduling workflows.
Usage & design
Start with a date through v-model, then provide the spaces and events to display. Each event links to a space through entityId; the schedule handles navigation and time-based layout.
Without toolbar
Use the hide-toolbar prop when schedule navigation and controls are provided elsewhere in the interface.
Slots
Customize focused regions without replacing the schedule layout. #toolbar controls navigation, #event controls event content, and #empty-slot controls available intervals.
Toolbar slot
Build custom period navigation from the localized labels and callbacks exposed by the slot scope.
Event slot
Change the information hierarchy inside events while preserving a real interactive control and readable supporting text.
Empty-slot slot
Turn available intervals into explicit creation actions. Keep each replacement keyboard reachable and provide a meaningful accessible name.
Choose an available interval to create an event.
Integration
Combine ESchedule with EDialog to create and edit events in context. Empty intervals provide the initial date and time; existing events provide the model to update.
Accessibility
The schedule exposes a named region and renders default events and empty intervals as native buttons. Preserve those keyboard semantics in custom slots, announce workflow results, and let dialogs restore focus to the originating control.
Use Tab to reach events and available intervals, then press Enter or Space to activate them.
API reference
Reference the verified public props, slots, and emitted events for ESchedule.
ESchedule props
| Property | Type | Default |
|---|---|---|
| modelValue | Date | required |
Sets the base date for the active view. | ||
| view | ScheduleView | ScheduleView.Calendar |
Selects calendar or resource mode. | ||
| scale | CalendarScale | CalendarScale.Day |
Selects day or week scale while calendar mode is active. | ||
| spaces | ScheduleSpace[] | [] |
Provides the resources or spaces available to the schedule. | ||
| selectedSpace | ScheduleSpace | undefined | undefined |
Sets the active space used to filter calendar events. | ||
| events | ScheduleEvent[] | [] |
Provides the events rendered in the visible date and space range. | ||
| resourceColumns | string | number | undefined |
Limits the visible resource columns per page. | ||
| loading | boolean | false |
Marks the schedule busy, disables interaction, and shows linear progress. | ||
| color | string | 'primary' |
Sets the semantic color for schedule controls. | ||
| lng | suportedLng | global locale |
Sets the locale used by schedule labels and formatters. | ||
| rowHeight | string | number | '97' |
Sets the visual height of each time interval. | ||
| stickyTopHeader | string | number | 0 |
Sets the top offset for the sticky schedule header. | ||
| step | number | 3600 |
Sets each interval duration in seconds. | ||
| start | number | 0 |
Sets the visible start time in seconds from midnight. | ||
| end | number | 86400 |
Sets the visible end time in seconds from midnight. | ||
| elevation | ElevationLevel | undefined |
Applies a framework elevation preset to the schedule container. | ||
| eventElevation | ElevationLevel | 'none' | 'md' |
Applies a framework elevation preset to event wrappers or removes it explicitly. | ||
Slots
| Property | Type | Default |
|---|---|---|
| toolbar | ScheduleToolbarSlotProps | - |
Replaces the top toolbar and exposes localized state plus navigation callbacks. | ||
| event | { event: ScheduleEvent } | - |
Replaces event content and exposes the current event. | ||
| empty-slot | { data: ScheduleSlotEvent } | - |
Replaces an available interval and exposes its resolved time and space data. | ||
Events
| Property | Type | Default |
|---|---|---|
| update:modelValue | Date | - |
Emits when schedule navigation changes the base date. | ||
| update:view | ScheduleView | - |
Emits when calendar or resource mode changes. | ||
| update:scale | CalendarScale | - |
Emits when day or week scale changes. | ||
| update:selected-space | ScheduleSpace | undefined | - |
Emits when the active space changes. | ||
| click:header | { view, scale?, date, entityId? } | - |
Emits when a day or resource header is activated. | ||
| click:event | { data: ScheduleEvent, nativeEvent: MouseEvent } | - |
Emits the selected event and native click event. | ||
| click:empty-slot | { data: ScheduleSlotEvent, nativeEvent: MouseEvent } | - |
Emits the selected empty interval and native click event. | ||