# Scheduler Source: https://lumeo.nativ.sh/components/scheduler # 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 .NET CLI PackageReference Lumeo CLI dotnet add package Lumeo.Scheduler One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction). ## Usage @using Lumeo **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](https://fullcalendar.io/) (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. ## 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. Preview Code Month View (basic) Today June 2026 Month Week Day List Preview Code Week View (timed + all-day) Today Week of Month Week Day List Preview Code Click to Create Drag across the calendar grid to pick a time range — a dialog will ask for a title. Today Week of Month Week Day List Preview Code Drag to Reschedule Drag an event to move it. The component emits `OnEventChange` and updates the bound collection. Today Week of Month Week Day List Last change Drag an event to see it here. Preview Code Recurring Events 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. Today Week of Month Week Day List Preview Code Resource Color-Coding 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. Today Week of Month Week Day List Alice Chen Bob Kim Carol Wu ## API Reference ### Scheduler Prop Type Default Description Events IEnumerable? null The events to render. Use with @bind-Events for two-way binding. EventsChanged EventCallback> — 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 — Fires when the user clicks an event. OnDateSelect EventCallback — Fires when the user drag-selects a range — typical usage is to open a "new event" dialog. OnEventChange EventCallback — 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? null Resource list for color-coding events by person/room. A legend is rendered above the calendar. Does not require FullCalendar Premium. EventClassNames Func? null Callback returning extra CSS class names for an event chip. EventColor Func? 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? 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? Arbitrary app-level metadata round-tripped through the JS layer. DaysOfWeek IReadOnlyList? 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? 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](/components/calendar) — picker-only date grid without events. - [DatePicker](/components/date-picker) — single-date input with a calendar dropdown.