Svelte Scheduler and Calendar
Set one scheduler prop and the grid places its rows as events on a calendar instead of a table. It is the same <SvGrid> with the same data and columns; only the presentation changes. Events are positioned by time across Month, Week, Day and Agenda views, plus horizontal resource timelines where each row is a person, room or machine.
Like the board view, the scheduler is a pure view of the grid. It renders rows that have already been filtered, sorted and searched, and writes back only through callbacks such as onEventMove and onEventResize, so your data stays yours.
Install
npm i @svgrid/grid @svgrid/enterpriseThe grid and its data model are MIT-licensed in @svgrid/grid; this view ships in the commercial @svgrid/enterprise package and runs unlicensed while you evaluate.
The code
<script lang="ts">
import { SvGrid } from '@svgrid/grid'
import { enableSchedulerView } from '@svgrid/enterprise'
enableSchedulerView()
let data = $state([
{ id: 1, title: 'Standup', start: '2026-09-01T09:00', end: '2026-09-01T09:15' },
{ id: 2, title: 'Design review', start: '2026-09-01T13:00', end: '2026-09-01T14:00' },
])
</script>
<SvGrid
{data}
{columns}
scheduler={{
startField: 'start',
endField: 'end',
titleField: 'title',
initialView: 'week',
weekStartsOn: 1,
editable: true,
}}
/>What you get
- Four calendar views - Month, Week, Day and Agenda from one config, switchable at runtime from your own toolbar or the built-in one.
- Resource timelines - Point resourceField at a column and time runs left to right with one row per resource, sized to real durations.
- Drag to reschedule - Drag an event to move it, drag its edge to resize, or drag empty space to create one. Each raises a callback with the new times.
- Booking rules - Working hours, blackout dates, capacity and eligibility rules keep an appointment from landing where it should not.
- Recurrence and time zones - Repeating events with per-occurrence edits, a second time-zone ruler, and iCal import and export in the calendar app demo.
- Still a grid - The same rows render as a table whenever you want one, which is what makes an Upcoming list next to the calendar trivial.
Live examples
- Scheduler / calendar mode - The same <SvGrid>, same data + columns, rendered as a full calendar by setting one `scheduler` prop: rows become events bucketed by time. Switch Month / Week / Day / Agenda in the toolbar; drag an event to reschedule, drag its edge to resize, click to edit in a drawer. onEventMove / onEventResize write the new times back onto your row. Toggle Calendar / Table to see it is one grid. The calendar renderer ships in @svgrid/enterprise.
- Timeline views (Day / Week) - A horizontal resource timeline: teams are rows, time runs left→right on a scrollable axis, work items are bars sized to real durations (half-day blocks up to multi-day tasks). Switch Day (hour ticks) or Week (day ticks); drag a bar to re-time it, to another team's row to reassign, or an edge to resize. Click / drag empty space to select a range (arrows move, Shift+arrows extend, Enter creates); Ctrl-click bars to multi-select. Bar fill = team, left strip = status.
- Selecting cells & events - Drag empty slots to create events (drag across days for a rectangle - one per day); Ctrl/Cmd-click events to multi-select (Shift-click a range), drag the set to move it together, or press Delete to remove. Enterprise scheduler view.
- Scheduling rules & policies - Every booking policy the scheduler can enforce: business hours + a hard-blocked lunch band, a closed date, a highlighted holiday, min/max navigable dates, room capacity, a per-doctor day off, free/busy statuses, per-event reminders, drag-to-unschedule, and This / This-and-following / All recurrence edits.
- Meridian Clinic - appointment scheduling - A front-desk appointment console: providers with their own hours as day columns, a drag-in patient waitlist, a utilization gauge, and a live patient-flow pipeline (Waiting / Checked in / In room / Completed) that updates as you work.
- Horizon - Outlook-style calendar app - A full calendar client on the Scheduler + SvDockManager: NavPane module rail + mini date-picker + calendar toggles, and a dockable workspace (drag / resize / float panes) with the calendar over an Upcoming grid and an Inbox. Recurring events with per-occurrence edits, a second time-zone ruler, iCal import/export and undo.
Documentation
- Scheduler / calendar mode - Set one scheduler prop and the grid renders its rows as events on a calendar instead of a table. It is the same <SvGrid>, the same data and columns - only…
- Scheduler / calendar view - Any grid whose rows carry a date can render as a calendar instead of a table - a Month / Week / Day / Agenda (and Timeline) view where each row becomes an…
Frequently asked questions
How do I add a scheduler to a Svelte app?
Install @svgrid/enterprise, call enableSchedulerView() once, and set the scheduler prop on <SvGrid> with the fields that hold the start and end of each row.
Is the scheduler a Gantt chart?
No. The scheduler is a resource, booking and calendar view: appointments, staff and asset scheduling. It deliberately has no critical path, baselines or work-breakdown structure, and none are planned.
Is the scheduler free?
The scheduler prop and its config types are part of the free MIT grid, but the calendar renderer ships in the commercial @svgrid/enterprise package.
Can events be edited?
Yes. Set editable and the scheduler supports drag to move, edge-drag to resize, drag-select to create and a built-in edit drawer, each reporting back through a callback.