R shadcn registry

Big Calendar

A month, week, day, and agenda scheduling surface with exclusive event end dates, fullscreen navigation, and height-aware month rows.

registry:ui Registry JSON
Delivery calendar 3
Mon
Tue
Wed
Thu
Fri
Sat
Sun
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Engineering review
Site walk
24
25
26
27
28
29
30
Delivery window
31
1
2
3
4
5
6

Installation

pnpm dlx shadcn-svelte@latest add https://shadcn.cptckp.com/r/big-calendar.json

The CLI copies the source into your project and installs every dependency listed below.

Usage

import * as Component from '$lib/components/ui/big-calendar/index.js';
example.svelte
svelte 
<script lang="ts">
	import {
		BigCalendar,
		type BigCalendarEvent
	} from '$lib/components/ui/big-calendar/index.js';

	const focusDate = new Date(2026, 7, 17);
	const events: BigCalendarEvent[] = [
		{
			allDay: true,
			end: new Date(2026, 7, 20),
			id: 'engineering-review',
			start: new Date(2026, 7, 17),
			title: 'Engineering review',
			tone: 'primary'
		},
		{
			description: 'Site team and client representative',
			end: new Date(2026, 7, 19, 12),
			id: 'site-walk',
			start: new Date(2026, 7, 19, 9, 30),
			title: 'Site walk',
			tone: 'success'
		},
		{
			allDay: true,
			end: new Date(2026, 7, 25),
			id: 'delivery-window',
			start: new Date(2026, 7, 24),
			title: 'Delivery window',
			tone: 'warning'
		}
	];
</script>

<BigCalendar
	defaultDate={focusDate}
	{events}
	title="Delivery calendar"
	views={['month', 'agenda']}
/>

Files & dependencies

Installed asSource
big-calendar/big-calendar-agenda.sveltesrc/lib/registry/ui/big-calendar/big-calendar-agenda.svelte
big-calendar/big-calendar-date.tssrc/lib/registry/ui/big-calendar/big-calendar-date.ts
big-calendar/big-calendar-event.sveltesrc/lib/registry/ui/big-calendar/big-calendar-event.svelte
big-calendar/big-calendar-layout.tssrc/lib/registry/ui/big-calendar/big-calendar-layout.ts
big-calendar/big-calendar-month.sveltesrc/lib/registry/ui/big-calendar/big-calendar-month.svelte
big-calendar/big-calendar-presentation.tssrc/lib/registry/ui/big-calendar/big-calendar-presentation.ts
big-calendar/big-calendar-time-grid.sveltesrc/lib/registry/ui/big-calendar/big-calendar-time-grid.svelte
big-calendar/big-calendar-toolbar.sveltesrc/lib/registry/ui/big-calendar/big-calendar-toolbar.svelte
big-calendar/big-calendar-types.tssrc/lib/registry/ui/big-calendar/big-calendar-types.ts
big-calendar/big-calendar.sveltesrc/lib/registry/ui/big-calendar/big-calendar.svelte
big-calendar/index.tssrc/lib/registry/ui/big-calendar/index.ts

npm dependencies

  • @internationalized/date@^3.12.2
  • @lucide/svelte@^1.28.0

Registry dependencies