Day Schedule
Calendars
Source and install need .
pnpm dlx shadcn@latest add @assembli/event-calendarEvent Calendar
A month view calendar like Google Calendar's. Multi-day events run as bars across the days they cover, timed events sit as rows with a dot and start time, and full days show "+N more". Click an event for its time, place and your own actions, or open a day's agenda. Arrows move by day and week, Page Up and Down by month, and Enter opens the focused day. Months slide in the way you travel.
Props
Other props pass through to the root element.
events*
CalendarEvent[]
month
Date
Any date in the month to show. Uncontrolled by default.
defaultMonth
Date
onMonthChange
(month: Date) => void
onDayClick
(day: Date) => void
Called when a day is clicked, e.g. to start a new event on it.
eventActions
(event: CalendarEvent) => React.ReactNode
Rendered at the bottom of an open event, e.g. Edit and Delete buttons.
action
React.ReactNode
Buttons for the header, e.g. "New event".
weekStartsOn
0 | 1
Default
00 = Sunday, 1 = Monday.
maxEvents
number
Default
3Event rows shown per day before "+N more".
locale
string
| Prop | Type | Default | Description |
|---|---|---|---|
| events* | CalendarEvent[] | – | |
| month | Date | – | Any date in the month to show. Uncontrolled by default. |
| defaultMonth | Date | – | |
| onMonthChange | (month: Date) => void | – | |
| onDayClick | (day: Date) => void | – | Called when a day is clicked, e.g. to start a new event on it. |
| eventActions | (event: CalendarEvent) => React.ReactNode | – | Rendered at the bottom of an open event, e.g. Edit and Delete buttons. |
| action | React.ReactNode | – | Buttons for the header, e.g. "New event". |
| weekStartsOn | 0 | 1 | 0 | 0 = Sunday, 1 = Monday. |
| maxEvents | number | 3 | Event rows shown per day before "+N more". |
| locale | string | – |
