Search nx-ui

Jump to any foundation, component, block or example.

Calendar View

A props-driven event calendar with Month, Week, Day and Agenda surfaces — event chips with a '+N more' popover, hour-gridded time columns with side-by-side overlap layout, all-day and multi-day spanning bars, a live current-time line, and optional pointer drag-to-move. Feed it events and wire the callbacks; it stays theme-aware in light and dark.

$bunx shadcn@latest add @nx-ui/calendar-view
Registry item

Four views, one calendar

The full block. Switch between Month, Week, Day and Agenda with the toolbar; click an event or an empty slot, or drag an event to reschedule it (month grid and week/day columns). All four render the same Nexus ReGen operations week.

October 2026

M
T
W
T
F
S
S
28
29
30
1
2
3
4
5
6
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
1
2
3
4
5
6
7
8

Week view — overlapping bookings

Timed events lay out side by side when they overlap, with an all-day lane for permit deadlines and multi-day campaigns, plus the red current-time indicator on today's column.

12 – 18 October 2026

Mon12
Tue13
Wed14
Thu15
Fri16
Sat17
Sun18
All day
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00

Agenda — a running schedule

The same events grouped day by day: the compact, scan-friendly surface for a long list of collections, deliveries and meetings.

October 2026

13
Tue
Oct 2026
14
Wed
Oct 2026
15
Thu
Oct 2026
16
Fri
Oct 2026
17
Sat
Oct 2026

API reference

Exported parts and their props, extracted from the component source.