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

Drag an event to move it, drag its edge to resize, drag on empty time to create.Drag an event to move it; long-press empty time to create one.

Drag an event to move it, drag its edge to resize, drag on empty time to create.

Drag an event to move it; long-press empty time to create one.

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

Single-day view — no week start

Turns off drag, resize and drag-to-create

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

Agenda views only

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

week-agenda only

Hatched unbookable ranges, like a lunch break

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

week-planner and week-agenda only