Calendar
Month, week and day views with colour-themed events, a current-time marker, and a day view with a mini calendar and event details. Figma V8.0: Type (Month / Week / Day view) × Breakpoint.
import
{ Calendar } from "@pepulux/ui"Type: Month view
January 2027
Jan 1, 2027 – Jan 31, 2027
Mon
Tue
Wed
Thu
Fri
Sat
Sun
28
29
30
31
1
2
3
4
5
6
1 more…
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Type: Week view
Events are positioned by start and end time. The purple line marks the current time.
January 2027
Week 2Jan 4, 2027 – Jan 10, 2027
Mon4
Tue5
Wed6
Thu7
Fri8
Sat9
Sun10
Type: Day view
Mini calendar and the selected event’s details sit in a side panel (hidden on small screens).
January 8, 2027
Week 2Friday
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| view | "month" | "week" | "day" | "month" | Figma Type — initial view. Users can switch with the view menu |
| initialDate | Date | — | Date the calendar opens on |
| events | CalendarEvent[] | — | { id, title, start, end, color?, dot?, description?, reminder?, guests?, guestsYes?, guestsAwaiting? } |
| color | "gray" | "blue" | "indigo" | "purple" | "pink" | "orange" | "green" | "yellow" | string | — | On an event — a Figma colour theme, or any CSS colour for a custom event |
| now | Date | — | Current time for the Today highlight and time marker (defaults to the real time) |
| showAddEvent / onAddEvent | boolean / () => void | true | Figma "Add event" button |
| showSearch / onSearch | boolean / () => void | true | Search icon button in the header |
| maxEventsPerDay | number | 3 | Month view — events shown before "N more…" |
| onDateClick | (date: Date) => void | — | Called when a month day cell is clicked |
| onEventClick | (event: CalendarEvent) => void | — | Called when an event is clicked |
| onViewChange / onDateChange | (…) => void | — | Called when the view or visible date changes |
| className | string | — | Extra classes — the calendar is 720px tall by default (h-[720px]) |