source

Calendar

Feature-rich calendar with month, week, day, year, and agenda views. Supports events, time grid, drag & drop, recurrence, date range selection, and custom rendering.

MoDiMiDoFrSaSo

Meeting

Deadline

Fokuszeit

Social

Variant

Size

Selection Mode

Week Numbers

Outside Days

Fixed Weeks

Event Popover

Mini Calendar

Animated

Disabled

Loading syntax highlighting...

01 Examples

Month View with Events

Calendar with color-coded events, a category legend, an event detail list, and week numbers. Click a day to see its events.

MoDiMiDoFrSaSo

Meeting

Deadline

Social

Gesundheit

Loading syntax highlighting...

Week View with Time Grid

Week view with an hour-based time grid, overlapping appointments, and all-day events. The time axis shows 30-minute intervals.

08:00

08:30

09:00

09:30

10:00

10:30

11:00

11:30

12:00

12:30

13:00

13:30

14:00

14:30

15:00

15:30

16:00

16:30

17:00

17:30

Meeting

Fokuszeit

Pause

Loading syntax highlighting...

Multi-Day Events

Events spanning multiple days — conferences, sprints, or vacations. Hovering a day with events opens an event popover.

MoDiMiDoFrSaSo

SvelteConf

Sprint 14

Skiurlaub

Hackathon

Release Week

Konferenz

Urlaub

Sprint

Deadline

Loading syntax highlighting...

Recurring Events

Recurring events with flexible rules: daily standups (weekdays only), biweekly reviews, sports on specific weekdays.

MonTueWedThuFriSatSun

Standup

Review

Sport

Waste collection

Loading syntax highlighting...

Year Overview

Year overview as a 3×4 grid of mini months. Event indicators show the distribution across the year. Clicking a month switches to the month view.

Release

Feiertag

Urlaub

Loading syntax highlighting...

Agenda View

Chronological event list for the next 21 days, grouped by date — ideal for a quick schedule preview.

Tuesday, March 10, 2026

Sprint Planning

Sprint 14 planning with the team

Wednesday, March 11, 2026

Dentist

10:00 AM

Code Review

Thursday, March 12, 2026

Yoga class

6:00 PM

Saturday, March 14, 2026

Release v3.0

Production Deployment

Sunday, March 15, 2026

Max's birthday party

Monday, March 16, 2026

Retro

Wednesday, March 18, 2026

Parent-teacher night

7:30 PM

Friday, March 20, 2026

Hackathon

Build an AI prototype

Saturday, March 21, 2026

Hackathon

Demo & presentation

Work

Personal

Health

Loading syntax highlighting...

Date Range Selection

Date range selection with two clicks. Navigation is constrained by minDate/maxDate. The bordered variant visually sets the calendar apart.

MonTueWedThuFriSatSun

Loading syntax highlighting...

Disabled Dates

Blocking specific days: isDateDisabled blocks weekends, disabledDates locks individual holidays. Navigation is constrained by minDate/maxDate.

MonTueWedThuFriSatSun

Loading syntax highlighting...

Custom Day Cell – Heatmap

Full control over day-cell rendering with the dayCell snippet. Here as a GitHub-style activity heatmap: the more events on a day, the more intense the green.

MoDiMiDoFrSaSo

Weniger Mehr

Loading syntax highlighting...

02 Accessibility

ARIA Roles

The month grid uses role="grid" with role="row" for weeks and role="gridcell" for days. Each cell carries aria-selected, aria-disabled, and aria-current="date" for today.

Keyboard Navigation

← → move focus between days, ↑ ↓ between weeks. Home/End jump to the start/end of the week. PageUp/PageDown navigate between months. Enter/Space select the focused day. Focus rings use focus-visible: for keyboard-only visibility.

Screen Reader Labels

Every day cell has an aria-label with the full date (e.g. "Thursday, March 12, 2026"). Navigation buttons have descriptive labels. Event dots are aria-hidden; event details remain accessible through the event list.

Touch & Gestures

Horizontal swiping navigates between months/weeks/days. Touch input is handled through the Pointer Events API. Swipe gestures can be disabled via swipeable={false}. Animations respect prefers-reduced-motion.

Internationalization

All visible text and ARIA labels use i18n keys via bt(). Date formatting relies on the native Intl.DateTimeFormat with the configured locale. Weekday names, month names, and date formats adapt automatically.

03 API Reference

58 props

No matching properties

No matching properties

04 Installation

Import

Loading syntax highlighting...

llm.txt