Calendar 11 - Simple Week Calendar

Pro

A bordered week view with a business hours grid where you click or drag down a day to add an event, and click an event to edit or delete it.

Shadcn Calendar 11 block

Component data

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

Calendar 11 block design & features

Calendar11 is a simple week calendar built with shadcn/ui Button, Dialog, Field, and Input. A bordered panel holds the week range with previous and next arrows, a new event button, seven day columns with today's date in a filled circle, and an hour grid from 7am to 8pm that fits without scrolling.

Pressing on an empty part of a day and dragging down draws a highlighted block that shows the time range as it grows, and releasing opens a dialog with the date, start, and end already filled in. A single click creates a one hour slot instead. Clicking an existing event opens the same dialog to edit or delete it.

Events are tinted blocks with a colored left edge, title, and time range, using the theme chart palette. It is a clean, Google style week grid and the most basic of the schedule views. Content-driven: it needs event titles and times.

On a narrow screen the week scrolls sideways inside the panel.