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 />
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.
June 2026
Week of
Drag across the calendar grid to pick a time range — a dialog will ask for a title.
Week of
Drag an event to move it. The component emits OnEventChange and updates the bound collection.
Week of
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.
Week of
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.
Week of
Alice Chen
Bob Kim
Carol Wu
API Reference
Scheduler
| Prop | Type | Default | Description |
|---|---|---|---|
| Events | IEnumerable<SchedulerEvent>? | null | The events to render. Use with @bind-Events for two-way binding. |
| EventsChanged | EventCallback<IEnumerable<SchedulerEvent>> | — | Fires with the updated collection after the user drags or resizes an event. |
| InitialView | SchedulerView | Month | Which view to show on first render. Values: Month, Week, Day, List. |
| InitialDate | DateTime? | today | Anchor date the calendar centers on at mount. |
| Editable | bool | true | When true the user can drag events to move/resize them. |
| Selectable | bool | true | When true the user can drag-select a range to create a new event. |
| BusinessHours | bool | false | Shade Mon–Fri, 9–5 as business hours in time-grid views. |
| Height | string | "640px" | CSS height for the calendar canvas (the toolbar sits above it). |
| FirstDayOfWeek | int | 1 | First visible day of the week. 0 = Sunday, 1 = Monday, … 6 = Saturday. |
| OnEventClick | EventCallback<SchedulerEvent> | — | Fires when the user clicks an event. |
| OnDateSelect | EventCallback<SchedulerDateRange> | — | Fires when the user drag-selects a range — typical usage is to open a "new event" dialog. |
| OnEventChange | EventCallback<SchedulerEvent> | — | Fires with the updated event after a drag or resize completes. |
| NowIndicator | bool | true | Show the current-time line in time-grid views. Maps to FullCalendar's nowIndicator. |
| SlotMinTime | TimeOnly? | null | Earliest visible time in time-grid views (e.g. new TimeOnly(7,0)). Null = FullCalendar default (midnight). |
| SlotMaxTime | TimeOnly? | null | Latest visible time in time-grid views. Null = FullCalendar default (midnight next day). |
| SlotDuration | TimeSpan? | null | Duration of each slot row, e.g. TimeSpan.FromMinutes(15). Null = FullCalendar default (30 min). |
| Resources | IReadOnlyList<SchedulerResource>? | null | Resource list for color-coding events by person/room. A legend is rendered above the calendar. Does not require FullCalendar Premium. |
| EventClassNames | Func<SchedulerEvent, string>? | null | Callback returning extra CSS class names for an event chip. |
| EventColor | Func<SchedulerEvent, string>? | null | Callback returning a CSS color for an event. Priority: callback > event.Color > resource color. |
| Class | string? | null | Additional CSS classes applied to the outer wrapper. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. |
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.