svelte-calendar — a Svelte 5 calendar component, live demo

Click a day's name to open it in day-planner, or an event to report it here.Tap a day's name to open it in day-planner, or an event to report it here.

Click a day's name to open it in day-planner, or an event to report it here.

Tap a day's name to open it in day-planner, or an event to report it here.

Just the component: its own header with Today, the arrows and the view pills

Built-in header hidden; the page's own Today and arrows drive currentDate

Editable week grid with business hours, blocked lunch slots, and disabled dates

Fixed weekly template: day names only, no past-day dimming, read-only

Week agenda as side-by-side day columns — classic class-schedule grid

Chromeless compact agenda for dropping into an existing page

Which built-in view renders: planners are time grids, agendas are lists

auto reads the host page's colours and type; neutral and midnight are fixed presets

BCP 47 tag for dates, weekdays and the 12/24-hour clock

Show events and the now line in an IANA zone instead of the visitor's own

Below 768px of container width the calendar swaps to touch-first views

Start weeks on Monday instead of Sunday

Turns off drag, resize and drag-to-create

No drag editing in this view

The view switch in the header

Previous/next arrows and the Today button

No past-day dimming — for template schedules

Off: headers show day names only (Mon, Tue, …)

Right-to-left layout

Minimal dot, time and title rows in agenda views

Week agenda days as side-by-side timetable columns on desktop; overrides compact

Hatched unbookable ranges, like a lunch break

Planner and scroll views only

Dates that refuse new events and moves

Crop the grid to a start and end hour

Not a prop: a 390px-wide host — the container-based mobile mode kicks in

First visible hour of the grid

Needs visibleHours

Hour the grid ends at (exclusive)

Days per week view — 5 is a workweek, 3 a rolling window