GitHub

svelte-calendar — interactive demo

Examples
Which built-in view renders: Planner is a time grid, Agenda is a list
auto probes your page and matches it; neutral/midnight are fixed presets
BCP 47 tag for date/time formatting (prop: locale)
Below 768px the calendar swaps to touch-first views (prop: mobile)
Single-day view — no week start
Disables drag, resize, and click-to-create
Day/Week switch in the header (prop: showModePills)
Prev/next arrows and Today button in the header
No past-day dimming — for template schedules
Off: headers show day names only (Mon, Tue, …)
Right-to-left text direction (prop: dir='rtl')
Agenda views only
Week Agenda only
Preview in a 390px frame — the container-based mobile mode kicks in
Advanced controls

Availability

Hatched unbookable ranges, e.g. lunch breaks (prop: blockedSlots)
Dates that reject event creation and moves (prop: disabledDates)

Planner

Crop the grid to a start/end hour (prop: visibleHours)
6
First visible hour of the grid
21
Hour the grid ends at (exclusive)
7
Week views only
Friday, Sep 11
Code for this setup 
<script>
  import { Calendar, createMemoryAdapter } from '@nomideusz/svelte-calendar';

  const adapter = createMemoryAdapter(events);
  const blockedSlots = [
    { start: 12, end: 13, label: 'Lunch' },        // every day 12–13
    { day: 6, start: 0, end: 9, label: 'Sat morning' },
    { day: 7, start: 0, end: 9, label: 'Sun morning' },
  ];
  const disabledDates = [/* Date objects to grey out */];
</script>

<Calendar
  {adapter}
  view="day-planner"
  {blockedSlots}
  {disabledDates}
/>