Week Calendar
Prov1.0.0A week calendar with overlapping events, an all-day row, quick drafting and hideable calendars.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { WeekCalendar, type CalendarDef, type CalendarEvent } from "@/components/ui/notchset/blocks/week-calendar";
export function Agenda({ calendars, events }: { calendars: CalendarDef[]; events: CalendarEvent[] }) {
return (
<WeekCalendar
calendars={calendars}
events={events}
today={new Date().toISOString().slice(0, 10)}
zone="ZÜRICH · UTC+2"
onCreate={async (event) => {
const res = await fetch("/api/events", { method: "POST", body: JSON.stringify(event) });
return (await res.json()) as CalendarEvent;
}}
/>
);
}Props
calendars–{ id, label, tone }[]tone is "ink", "muted", "edge" or "hatched": a left bar and a fill, no new hues.
events–{ id, date, start, end, calendar, title, location?, note? }[]ISO dates and hours in the calendar's zone (9.5 is 09:30).
allDay–{ id, from, to, calendar, title }[]Banners across the all-day row.
today / now / zone–string / number / stringOpens on today's week; now (hours) draws the now line; zone labels the sidebar.
onCreate / onDelete–(event) => Promise<event> / (event) => voidStore a drafted event (resolve with it) and a deletion.
Anatomy
- Overlapping events cascade in week views and sit side by side in DAY view.
- A delete needs a second press within 3 seconds.
- Hidden calendars still count in the sidebar.
WeekCalendardata-slot="week-calendar"Toolbar, sidebar, all-day row, hour grid and event panel.
Source
components/ui/notchset/blocks/week-calendar.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
Build for your project
Code/install build
Installation
pnpm dlx shadcn@latest add @beautiful-ui-pro/week-calendarNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- Showing a person's or team's week of meetings
- Letting people add an event straight from the grid
Use something else when
- Month planning: use a month grid
- Booking a slot across people: use Find Time
Mistakes to avoid
- Convert events to one zone before passing them
- Keep the grid to working hours; events outside from–to are clipped to it
Agents find it by
- week calendar, calendar view, schedule, agenda, events, scheduler, day view, Notchset
Where agents read it
- Guide for this component: https://beautiful-ui.dev/md/week-calendar.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://beautiful-ui.dev/api/mcp(setup)
Behaviour
Keyboard
- Tab then Enter
- Open an event or a day (day view)
- Enter
- Save a draft from its title field
- Esc
- Close the panel or discard a draft
- ← →
- Change the view
Accessibility
- Every event is a button named with its title and time; the panel is a labelled dialog that Esc closes
- Calendars are checkboxes; hidden events leave the tab order
- The range label is a polite live region, so previous and next are announced
Motion
- Week, day and view changes
- The grid slides in from the direction of travel (380ms settle)
- Draft
- Scales in from the top (260ms)
- Hide a calendar
- Its events fade out (200ms)
- Panel
- Rises in (260ms)
Responsive
- Under 760px (container width) the sidebar hides and days keep 96px, scrolling sideways.
Performance
- Overlaps are laid out per day on render; nothing runs while idle.
Changelog
v1.0.0 · 2026-10-04
First release
Part of
Included with Pro
Pro is in early access.
