DEV Community

Cover image for svelte5plus-calendar: Zero-dependency full calendar for Svelte 5
Dongsheng
Dongsheng

Posted on

svelte5plus-calendar: Zero-dependency full calendar for Svelte 5

#svelte #javascript #opensource

The problem

If you’re on Svelte 5, calendar UIs often mean wrapping a React-era library, accepting a heavy dependency tree, or rolling month grids yourself and stopping short of week time-grids, recurrence, and drag-resize. You want one component that feels like Google / Apple / Outlook — without dragging half of npm into the client.

What it is

svelte5plus-calendar is a full-featured, zero-runtime-dependency calendar component for Svelte 5: month, week, day, year, and agenda views, drag & drop editing, recurring events, multiple calendars, i18n, and dark mode. TypeScript-first; styles import automatically.

Docs with live examples: blackman99.github.io/svelte5plus-calendar

Source: github.com/Blackman99/svelte5plus-calendar (MIT)

npm: svelte5plus-calendar

What you get

Six views

Month (spanning multi-day bars, +N more popovers), week & day time grids, year overview, agenda list, and a resources view (rooms/people columns) for booking-style UIs.

Drag & drop

Move events across days/slots, drag all-day bars, resize from the bottom edge, drag empty space to select/create. Touch: long-press to drag, swipe to scroll.

Built-in popovers

Click an event for details (with delete); click/drag empty space for quick-create — zero config. Your callbacks replace them when provided.

Recurring events

Practical RRULE subset (FREQ, INTERVAL, COUNT, UNTIL, BYDAY incl. 2TU/-1FR, BYMONTHDAY) as strings or typed objects, plus exdates. This event and this and following edits; occurrence/series deletion.

Theming & i18n

Light / dark / auto; every color, radius, and font is a CSS custom property; 10-color event palette that adapts to dark mode. Any BCP-47 locale via Intl (no bundles); UI strings for 10 languages; locale-aware week start and clock; timeZone prop with edits converted back.

More

Multiple calendar sources with visibility and edit permissions; current-time indicator and business hours; validRange + eventOverlap={false}; ICS parseICS / toICS; custom eventContent snippets; headless exports (layoutDay, expandRecurrence, …); keyboard navigation and aria-live.

Quick start 

npm install svelte5plus-calendar
Enter fullscreen mode Exit fullscreen mode

Requires Svelte 5. Styles are imported automatically.

<script lang="ts">
    import type { CalendarEvent } from 'svelte5plus-calendar';
    import { Calendar } 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),
            color: 'teal'
        },
        {
            id: '3',
            title: 'Standup',
            start: new Date(2026, 7, 10, 9, 30),
            end: new Date(2026, 7, 10, 9, 45),
            recurrence: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR'
        }
    ]);
</script>

<div style="height: 640px">
    <Calendar bind:events view="week" locale="en" editable selectable />
</div>
Enter fullscreen mode Exit fullscreen mode

Handle edits with rollback:

<Calendar
    bind:events
    editable
    onEventChange={async ({ event, start, end, revert }) => {
        try {
            await api.update(event.id, { start, end });
        } catch {
            revert();
        }
    }}
/>
Enter fullscreen mode Exit fullscreen mode

Who it’s for

  • Svelte 5 apps that need a real calendar, not only a date picker
  • Teams that want DnD + recurrence + i18n without a React interop layer
  • Authors who prefer CSS-variable theming and headless layout utils

Who it’s not (yet) for

  • Projects stuck on Svelte 4 (this package requires Svelte 5)
  • Apps that need a full RFC5545 / CalDAV server stack (client component + practical RRULE subset)
  • Teams standardized on FullCalendar’s plugin ecosystem with sunk cost already paid

Light comparison (not a roast)

Need Typical pick svelte5plus-calendar angle
Battle-tested React calendar FullCalendar Svelte 5-native, zero runtime deps
Month-only picker Lightweight date libs Full views + DnD + RRULE + resources
Stay in Svelte DIY grids One component + docs site examples

Try it / tell us what’s wrong

We’re especially hungry for feedback on:

  1. First-hour DX (npm install → editable week view)
  2. RRULE edit/split edges in real product data
  3. Gaps vs FullCalendar for your booking / scheduling use case

👉 Live docs · GitHub · npm

Comment with your current Svelte calendar approach and the one feature that would make you switch — we’ll prioritize from real replies.

Top comments (0)