A month calendar with colored event chips, a highlighted today, an event popover, sliding month changes and an agenda panel for the selected day.
npx shadcn@latest add https://hyperblur.dev/r/app-calendar-month.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/app-calendar-month.tsx.
import { AppCalendarMonth } from "@/components/hyperblur/app-calendar-month"
<AppCalendarMonth today="2026-11-04" onEventOpen={(e) => console.log(e.title)} />| Prop | Type | Default | Description |
|---|---|---|---|
| events | AppCalendarEvent[] | sample events | Events with id, date (YYYY-MM-DD), title and optional time, end, color, calendar, location and people. Color takes a name (blue, violet, emerald, amber, coral, cyan, pink) or any CSS color. |
| today | string | "2026-11-04" | Date treated as today, in YYYY-MM-DD. Pass your own value so server and client render the same day. |
| defaultMonth | string | Month shown first, in YYYY-MM. Defaults to the month of `today`. | |
| weekStartsOn | 0 | 1 | 1 | First day of the week: 0 for Sunday, 1 for Monday. |
| accent | string | "#2f7bff" | Color of today, the selection and primary buttons. |
| onMonthChange | (month: string) => void | Called with the new month in YYYY-MM. | |
| onDateSelect | (date: string) => void | Called when a day is selected by click or arrow keys. | |
| onEventOpen | (event: AppCalendarEvent) => void | Called when an event chip or agenda item is opened. | |
| onCreateEvent | (date: string) => void | Called by the New event button with the selected date. |