Calendar
// 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
Component Source
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
Component Source
<CalendarView
defaultDate={new Date(2026, 6, 15)}
view="3days"
allowViewChange={false}
events={events}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| allowedViews | CalendarViewMode[] | — | Allowed view modes for user switching (defaults to ["full", "1day", "2days", "3days"]). |
| allowViewChange | boolean | — | Whether user is allowed to toggle view modes (defaults to true). |
| className | string | — | — |
| date | Date | — | Currently anchored date (controlled). |
| defaultDate | Date | — | Initial anchored date for uncontrolled mode. |
| defaultView | "full" | "1day" | "2days" | "3days" | — | Default view mode for uncontrolled mode (defaults to "full"). |
| endHour | number | — | Ending hour for schedule view (0–23, defaults to 23 for 11 PM). |
| events | CalendarEvent[] | — | List of events to display on the calendar. |
| fitContainer | boolean | — | Stretch to fit parent container height & flex layout (defaults to true). |
| onDateChange | ((date: Date) => void) | — | Callback fired when anchored date changes. |
| onEventClick | ((event: CalendarEvent) => void) | — | Callback fired when an event chip is clicked. |
| onSelectDate | ((date: Date) => void) | — | Callback fired when a date cell or day header is clicked. |
| onViewChange | ((view: CalendarViewMode) => void) | — | Callback fired when view mode changes. |
| startHour | number | — | Starting hour for schedule view (0–23, defaults to 0 for 12 AM). |
| style | CSSProperties | — | — |
| view | "full" | "1day" | "2days" | "3days" | — | Active view mode ("full", "1day", "2days", "3days"). |