'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Data displayAlea Pro
Scheduler
Day and week views with a time grid: events placed by time and side by side when they overlap, an all-day row, the current time, a period switcher, a view switch and new events from a click or a button.
import { Scheduler } from '@alea/pro';
Examples
Week
A work week with overlapping meetings side by side, an all-day event and the current time. Switch views, move between weeks, click an empty slot or use New event to add one.
October 2026
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-accent…--alea-accent-strong…--alea-accent-subtle…--alea-border…--alea-border-control…--alea-border-strong…--alea-status-danger…--alea-status-danger-bg…--alea-status-info…--alea-status-info-bg…--alea-status-success…--alea-status-success-bg…--alea-status-warning…--alea-status-warning-bg…--alea-surface…--alea-surface-raised…--alea-text…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…--alea-space-4…
Radius
--alea-radius-lg…
Type
--alea-font-family-body…--alea-font-size-base…--alea-font-size-xs…--alea-font-weight-semibold…
Motion
--alea-motion-duration-fast…
Props
Scheduler props
Day and week views with a time grid: events placed by time and side by side when they overlap, an all-day row, the current time, a period switcher and a view switch. Each day is a labelled list of its events, in time order, so the keyboard and screen readers go through them as a list.
| Prop | Type | Default | Description |
|---|---|---|---|
eventsrequired | ScheduleEvent[] | - | The events. |
className | string | - | Extra class names. |
date | Date | - | The day the view starts from (controlled). |
dayEnd | number | 21 | |
dayStart | number | 7 | First and last hour of the grid. Default 7 and 21. |
defaultDate | Date | - | The day at first. Default today. |
height | string | number | 560 | Height of the scrolling grid. Default 560. |
hourHeight | number | 56 | Height of one hour in px. Default 56. |
onCreate | ((start: Date) => void) | - | Called with the start of a 30 minute slot when an empty slot is clicked, and from the New event button (with the next round hour). |
onDateChange | ((date: Date) => void) | - | Called when the visible period changes. |
onEventPress | ((event: ScheduleEvent) => void) | - | Called with an event when it is pressed. |
onViewChange | ((view: "day" | "week" | "workweek") => void) | - | Called when the view changes; with it, a view switch shows in the header. |
view | "day" | "week" | "workweek" | 'week' | day, week (default) or workweek (Monday to Friday). |
weekStartsOn | 0 | 1 | 1 | First day of the week: 0 Sunday, 1 Monday (default). |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- Variants
viewdayweekworkweek- States
- Hover (CSS)Pressed (CSS)
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-sched.alea-sched-head.alea-sched-nav.alea-sched-title.alea-sched-actions.alea-sched-grid-head.alea-sched-dayname.alea-sched-allday.alea-sched-gutter-label.alea-sched-allday-col.alea-sched-event.alea-sched-scroll- Data attributes
data-todaydata-tone=accentdata-tone=successdata-tone=warningdata-tone=dangerdata-tone=infodata-tone=neutraldata-short
Accessibility
- Each day is a labelled list of its events in time order, so keyboard and screen reader users go through a day as a list.
- Every event is a button named with its title, its start and end time and its detail.
- The period title is announced when it changes; previous, next and today are named buttons.
- Clicking an empty slot is a pointer shortcut: the New event button does the same from the keyboard.
- The current time line has a name, and the grid scrolls to it on load.
Keyboard
| Key | Does |
|---|---|
| Tab | Moves through the header controls, then the events of each day in time order |
| Enter or Space (on an event) | Opens it |
Do and don't
Do
- Give events a short title and put the room or people in detail.
- Use tones for meaning (tentative, cancelled), not decoration.
- Start the grid at the first working hour so the morning is in view.
Don't
- Don't use it for months: that is CalendarView.
- Don't rely on color alone: the title should say what is special.
In Figma
Scheduler with View (Day, Work week, Week), events by tone, the all-day row and the now line.