Calendar
Full-featured schedule and event calendar primitive supporting full month grid and 1-day, 2-day, or 3-day time columns.
// Plain markup
import { Calendar, CalendarEventChip, CalendarView } from "@shavin/ui";Interactive Multi-View Layout
Support seamless view switching across full (month grid), 1day, 2days, and 3days schedule layouts.
Month Grid & Day Schedule Views
July 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
152 evts
162 evts
172 evts
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
Interactive State Log:
Current View: full
Selected Date: Wed Jul 15 2026
import { CalendarView, CalendarEvent } from "@shavin/ui";
const events: CalendarEvent[] = [
{ id: "1", title: "Design System Review", date: "2026-07-15", time: "10:00 AM - 11:30 AM", tone: "info" },
{ id: "2", title: "Sprint Planning", date: "2026-07-15", time: "2:00 PM - 3:30 PM", tone: "success" },
{ id: "3", title: "Architecture Sync", date: "2026-07-16", time: "9:00 AM - 10:00 AM", tone: "warning" },
];
<CalendarView
defaultDate={new Date(2026, 6, 15)}
events={events}
allowedViews={["full", "1day", "2days", "3days"]}
onSelectDate={(date) => console.log("Selected Date:", date)}
onEventClick={(event) => console.log("Clicked Event:", event)}
/>Restricted & Locked View Modes
Lock view switching via allowViewChange= or restrict available views with allowedViews.
Fixed 3-Day Schedule View
Jul 15 – Jul 17, 2026
Time
Wed15
Thu16
Fri17
12 AM
1 AM
2 AM
3 AM
4 AM
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
8 PM
9 PM
10 PM
11 PM
<CalendarView
defaultDate={new Date(2026, 6, 15)}
view="3days"
allowViewChange={false}
events={events}
/>Props
CalendarView takes no props beyond className and the native element's attributes.