svelte5plus·calendar GitHub

Getting Started

svelte5plus-calendar is a full-featured calendar component built on Svelte 5 runes — no runtime dependencies, TypeScript-first, and themeable down to the last pixel.

Installation

npm install svelte5plus-calendar

Requires Svelte 5. The stylesheet is imported automatically with the component.

Your first calendar

<script lang="ts">
  import { Calendar, type CalendarEvent } from 'svelte5plus-calendar';

  let events = $state<CalendarEvent[]>([
    {
      id: '1',
      title: 'Kickoff meeting',
      start: new Date(2026, 7, 13, 10, 0),
      end: new Date(2026, 7, 13, 11, 0)
    }
  ]);
</script>

<!-- The calendar fills its parent — give the wrapper a height. -->
<div style="height: 640px">
  <Calendar bind:events view="month" locale="en" />
</div>
Sizing — the calendar stretches to fill its parent element, so the wrapper needs an explicit height (or a flex/grid track).

Live example

Here it is running — click the Code button to see the exact source of this demo:

Hello, calendar

September 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
31
Sep 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Oct 1
2
3

The three bindable props

Almost everything you do with the calendar flows through three bindable props:

PropTypePurpose
bind:eventsCalendarEvent[]Your data. Drag & drop edits write back into this array.
bind:dateDateThe focused date — navigation buttons update it.
bind:view'day' | 'week' | 'month' | 'year' | 'agenda'The active view — switch it from your own UI at any time.

Where to next