A week view on a time grid where events can be dragged to another day or hour and stretched from their bottom edge, snapping to 15 minutes with a live time tooltip. Overlapping events share the column, a red line marks the current time and a click on an empty slot creates an event.
Nov 9 – 15 · 16 events · 18.5 h booked
npx shadcn@latest add https://hyperblur.dev/r/app-calendar-week.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/app-calendar-week.tsx.
import { AppCalendarWeek } from "@/components/hyperblur/app-calendar-week"
<AppCalendarWeek weekStart="2026-11-09" onEventChange={(e) => console.log(e.title, e.start)} />| Prop | Type | Default | Description |
|---|---|---|---|
| events | AppWeekEvent[] | Controlled events with id, day (0 to 6), start and end in minutes from midnight, title and optional color and location. Pair with onEventsChange. | |
| defaultEvents | AppWeekEvent[] | sample week | Initial events when uncontrolled. Color takes a name (blue, violet, emerald, amber, coral, cyan, pink) or any CSS color. |
| onEventsChange | (events: AppWeekEvent[]) => void | Called with the full list after a move, resize or create. | |
| onEventChange | (event: AppWeekEvent) => void | Called with the event that was moved or resized. | |
| onEventOpen | (event: AppWeekEvent) => void | Called when an event is clicked without dragging or opened with Enter. | |
| onCreate | (event: AppWeekEvent) => void | Called when a click on an empty slot creates a one hour event. | |
| onWeekChange | (direction: -1 | 0 | 1) => void | Called by the previous, Today and next buttons. | |
| weekStart | string | "2026-11-09" | First date of the week in YYYY-MM-DD. Day numbers and the month title are derived from it. |
| dayNames | string[] | ["Mon", ..., "Sun"] | Seven column labels starting at weekStart. |
| today | number | 1 | Index of today in the week, or -1 to hide the today highlight and the time line. |
| nowMinutes | number | 652 | Current time in minutes from midnight for the red line. Pass your own value so server and client match. |
| startHour | number | 8 | First hour shown on the grid. |
| endHour | number | 19 | Hour where the grid ends. |
| hourHeight | number | 44 | Height of one hour in pixels. |
| snap | number | 15 | Minutes that drags, resizes and arrow keys snap to. |
| accent | string | "#2f7bff" | Color of today and the focus rings. |