svelte5plus·calendar GitHub

Events & Calendars

Events are plain objects. Calendars (sources) group them, give them shared colors, and let users toggle whole groups on and off — like the calendar list in Google Calendar.

The event object

const event: CalendarEvent = {
  id: 'evt-42',                          // unique & stable
  title: 'Quarterly planning',
  start: new Date(2026, 7, 13, 9, 30),   // inclusive
  end: new Date(2026, 7, 13, 11, 0),     // exclusive
  allDay: false,
  color: 'purple',                       // palette name or any CSS color
  calendarId: 'work',                    // groups it under a source
  location: 'Room 3',
  description: 'Bring the roadmap.',
  meta: { anything: 'you like' }         // carried through untouched
};
FieldNotes
idRequired. Used to write drag & drop edits back to your array.
start / endPlain Date objects in local time; end is exclusive. Events crossing midnight simply span days.
allDayRenders in the all-day lane / as a month bar; times are ignored and the range snaps to whole days.
colorOne of 10 palette names (graphite, red, orange, yellow, green, teal, blue, indigo, purple, pink) or any CSS color like #7c3aed.
calendarIdLinks the event to a source; the event inherits the source color unless it sets its own.
editablePer-event override of drag & drop permission.
recurrence / exdatesSee Recurring Events.

Calendar sources

Pass an array of sources and reference them from events via calendarId. Toggling a source’s visible flag hides all of its events at once:

Toggle whole calendars

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
Color resolution — event.color → source.color → the accent color. Palette names adapt automatically between light and dark themes.