SVAR Svelte Calendar

SVAR Svelte Calendar is an interactive event calendar and scheduler component for Svelte and SvelteKit apps. It supports Day, Week, and Month views, drag-and-drop event editing, a ready-to-use event edit form, and rich customization options.

The calendar comes with full TypeScript support, extensible API, and flexible CSS styling. The PRO Edition offers additional views (Year, Agenda, Timeline, Resources), recurring events, multi-resource scheduling, timezone support, and more.

• Multiple built-in views: Day, Week, Month
• Drag-and-drop to move, resize, and create events
• Drag external items to the calendar as events
• Event editor form with rich text and file attachments
• Context menu and toolbar
• Tooltips and custom event cards
• Custom HTML in event markup
• Multiple calendars with toggleable visibility
• Event filtering
• Localization
• Mobile mode
• Light and dark themes
• REST data provider for backend integration
• iCal import/export
• Import from Excel
• Full TypeScript support

SVAR Svelte Calendar is available in open-source and PRO Editions. The PRO Edition offers four more scheduling views and automation features:

• Year view
• Agenda view
• Timeline view (horizontal timeline with resource rows)
• Resources view (single day with resource columns)
• Combined scales for Resource view
• Multi-resource events
• Recurring events (RRULE-based)
• Undo/redo support
• Timezone support
• Dynamic loading
• Export to PDF, PNG, Excel

Visit the pricing page for full feature comparison, licensing details, and free trial.

Or see the live demo.

To use the calendar widget, simply import the package and include the component in your Svelte file:

<script>
	import { Calendar, Willow } from "@svar-ui/svelte-calendar";

	const events = [
		{
			id: 1,
			start: new Date(2026, 4, 5, 10, 0),
			end: new Date(2026, 4, 5, 11, 30),
			text: "Project kickoff",
		},
	];
	const date = new Date(2026, 4, 5);
</script>

<div style="height: 600px">
	<Willow>
		<Calendar {events} {date} view="week" />
	</Willow>
</div>

For further instructions, follow the detailed quick start guide.

Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:

1. Install vite-plus (curl -fsSL https://vite.plus | bash on Mac/Linux, irm https://vite.plus/ps1 | iex on Windows). The project uses pnpm workspaces under the hood, so plain npm will not work.
2. Run vp i from the project root to install dependencies.
3. Run vp run build to build all packages.
4. Start the demo app in development mode with vp run start.

To run the tests:

vp test

If SVAR Svelte Calendar helps your project, give us a star! It helps us reach more developers and keeps us motivated to add new features.

Post an Issue or use our community forum.