Calendar 16 - Week Planner Calendar

Pro

A week planner with a column of event cards for each day, inline add forms, and drag and drop to move events between days.

Shadcn Calendar 16 block

Component data

ID
calendar16
Access
pro
Created
Oct 11, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Calendar 16 block design & features

Calendar16 is a week planner calendar built with shadcn/ui Button and Input. Instead of an hour grid, each day is a rounded column with the weekday, the date, and a stack of event cards sorted by time, with all day items at the top. The header shows the week number, the date range, and arrows to move between weeks, and today's column is outlined.

Every column ends with an add event button that opens a small inline form for the title, optional start and end times, and a calendar color, so leaving the times empty creates an all day item. Clicking a card turns it into the same form to edit or delete it, and cards can be dragged to another day.

Past days fade slightly so the rest of the week stands out, and colors come from the theme chart palette. It feels like a paper weekly planner and suits personal planning or team boards. Content-driven: it needs a week of events.

Columns go from seven across on wide screens to four, two, and one as the screen narrows.