Scheduler
A calendar & event scheduler with month, week, day, and list views. Drag events to reschedule, resize to change duration, or drag across the grid to create new ones.
Installation
dotnet add package Lumeo.Scheduler
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Scheduler />
Tested
Tier 3 · A11y + behavior
all components → Render Behavior A11y Keyboard Scale E2E
33 tests across 7 files. Auto-generated from the test suite.
In active development. Theme integration just landed — please refresh and report any
residual visual issues. FullCalendar Premium features (resource lane views, vertical resource view,
true timeline view) are NOT wrapped — see the licensing note below. This release adds simple
recurrence, resource color-coding, now-indicator, and slot-time controls.
Dependencies & licensing — MIT for everything Lumeo ships.
Powered by FullCalendar Standard
(MIT), loaded once on demand. The month / week / day / list views Lumeo wraps are all in the free MIT bundle.
Important caveat: FullCalendar's Premium features (Resource Timeline, Vertical Resource View, Resource Day Grid, and adapter plugins for Vue/React if you embed those) require a paid FullCalendar Premium license direct from FullCalendar. Lumeo does NOT wrap these and does NOT bundle any Premium code — but if you extend the Scheduler in your own app to call those plugins, that's on you.
Important caveat: FullCalendar's Premium features (Resource Timeline, Vertical Resource View, Resource Day Grid, and adapter plugins for Vue/React if you embed those) require a paid FullCalendar Premium license direct from FullCalendar. Lumeo does NOT wrap these and does NOT bundle any Premium code — but if you extend the Scheduler in your own app to call those plugins, that's on you.
When to Use
- Displaying appointments, meetings, shifts, or any time-based event grid.
- Giving users direct manipulation controls — drag to reschedule, drag-to-select to create.
- Switching between month overviews and focused day/week planning within the same view.
July 2026
Jul 20 – 26, 2026
July 23, 2026
Jul 20 – 26, 2026
Drag across the calendar grid to pick a time range — a dialog will ask for a title.
Jul 20 – 26, 2026
Drag an event to move it. The component emits OnEventChange and updates the bound collection.
Jul 20 – 26, 2026
Last change
Drag an event to see it here.
Events with DaysOfWeek repeat on the selected days.
Use RecurrenceEnd to bound the series and
ExceptionDates to skip specific occurrences.
This uses FullCalendar's free simple recurrence model — no premium plugin required.
Jul 20 – 26, 2026
Provide a Resources list and set ResourceId on each event
to automatically color-code events by resource and render a legend above the calendar.
This does NOT require the FullCalendar Premium resource plugin.
Jul 20 – 26, 2026
Alice Chen
Bob Kim
Carol Wu
API Reference
Scheduler
| Prop | Type | Default | Description |
|---|---|---|---|
| Events | IEnumerable<SchedulerEvent>? | — | The calendar's events. Controlled when EventsChanged has a delegate — the caller owns the collection and must apply drag/resize/click edits back onto it; otherwise the component manages its own working copy internally, seeded from this value. |
| InitialView | SchedulerView | SchedulerView.Month | The calendar view shown on mount. Default: Month. |
| InitialDate | DateTime? | — | The date the calendar is centered on at mount. Default: today. |
| Editable | bool | true | Allows events to be dragged and resized. Default: true. |
| Selectable | bool | true | Allows the user to click/drag a date range to select it, raising OnDateSelect. Default: true. |
| BusinessHours | bool | false | Shades non-business hours in the time-grid views (maps to FullCalendar's businessHours). |
| Height | string | "640px" | CSS height of the calendar canvas. Default: "640px". |
| FirstDayOfWeek | int | 1 | The first day of the week, 0 (Sunday) through 6 (Saturday). Default: 1 (Monday). |
| NowIndicator | bool | true | Show the current-time indicator line in time-grid views. Default: true. Maps to FullCalendar's nowIndicator option. |
| SlotMinTime | TimeOnly? | — | Earliest visible time slot in time-grid views (e.g. 07:00). Maps to FullCalendar's slotMinTime. Default: 00:00 (FullCalendar shows the full day). |
| SlotMaxTime | TimeOnly? | — | Latest visible time slot in time-grid views (e.g. 22:00). Maps to FullCalendar's slotMaxTime. Default: 24:00 (FullCalendar shows the full day). |
| SlotDuration | TimeSpan? | — | Duration of each time slot row in time-grid views. Maps to FullCalendar's slotDuration (formatted as HH:mm:ss). Default: 00:30:00. |
| Resources | IReadOnlyList<SchedulerResource>? | — | Optional list of resources (people, rooms, equipment). When provided, events are color-coded by their ResourceId and a legend is rendered above the calendar. Note: this uses Lumeo's color-coding fallback, NOT FullCalendar Premium resource lanes (which require a paid FullCalendar Premium license not bundled here). |
| EventClassNames | Func<SchedulerEvent, string>? | — | Optional callback that returns extra CSS class names for an event chip. The classes are appended to the FullCalendar event's classNames. Use for conditional styling without touching Color. |
| EventColor | Func<SchedulerEvent, string>? | — | Optional callback that returns a CSS color string for an event. Applied as backgroundColor / borderColor in FullCalendar. Supersedes Color when both are set; resource color applies as a fallback when neither is set. |
| Class | string? | — | Additional CSS classes merged onto the root card. |
| AdditionalAttributes | Dictionary<string, object>? | — | Additional HTML attributes captured and forwarded to the root card. |
Events
| EventsChanged | EventCallback<IEnumerable<SchedulerEvent>> | Invoked with the updated event collection after a drag, resize, or other edit. Binding this makes Events controlled. |
| OnEventClick | EventCallback<SchedulerEvent> | Invoked when an event chip is clicked. |
| OnDateSelect | EventCallback<SchedulerDateRange> | Invoked when the user selects a date/time range (click-drag on the grid). |
| OnEventChange | EventCallback<SchedulerEvent> | Invoked when an event's time window changes via drag or resize, alongside EventsChanged. |
| OnInitError | EventCallback<string> | Raised when JS initialization fails (e.g. CDN down, FullCalendar threw). The argument is the error message. When raised the component renders an error card instead of the calendar. |
SchedulerEvent
| Field | Type | Description |
|---|---|---|
| Id | string | Stable identifier used to reconcile edits back into the caller's collection. |
| Title | string | The label rendered on the event chip. |
| Start | DateTime | Start timestamp (inclusive). |
| End | DateTime | End timestamp (exclusive, per FullCalendar convention). |
| AllDay | bool | When true the event is rendered in the all-day lane. |
| Color | string? | CSS color or variable reference like "var(--color-primary)". |
| Url | string? | Optional link opened on click instead of firing OnEventClick. |
| ExtendedProps | Dictionary<string, object>? | Arbitrary app-level metadata round-tripped through the JS layer. |
| DaysOfWeek | IReadOnlyList<DayOfWeek>? | Recurring: days of the week on which the event repeats. Uses FullCalendar's free simple recurrence model. When set, Start/End provide the time-of-day only. |
| RecurrenceEnd | DateTime? | Recurring: last date on which the event appears. Only meaningful when DaysOfWeek is set. |
| ExceptionDates | IReadOnlyList<DateTime>? | Recurring: specific dates to skip (one-off exclusions). Only meaningful when DaysOfWeek is set. |
| ResourceId | string? | Matches this event to a SchedulerResource for color-coding when the Scheduler has a Resources list. |
| ClassNames | string? | Extra CSS class names applied directly to this event's chip (space-separated). |
SchedulerResource
| Field | Type | Description |
|---|---|---|
| Id | string | Identifier matched against SchedulerEvent.ResourceId. |
| Title | string | Display name shown in the resource legend. |
| Color | string? | CSS color applied to events belonging to this resource when the event has no explicit color. |
SchedulerDateRange
| Field | Type | Description |
|---|---|---|
| Start | DateTime | Range start timestamp. |
| End | DateTime | Range end timestamp (exclusive). |
| AllDay | bool | True when the user selected whole days in a day-grid. |
SchedulerView
| Value | Description |
|---|---|
| Month | Day-grid month view — best for an at-a-glance overview. |
| Week | Time-grid week view with hourly rows. |
| Day | Time-grid single-day view. |
| List | Agenda-style list of the current week's events. |
Related Components
- Calendar — picker-only date grid without events.
- DatePicker — single-date input with a calendar dropdown.