Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar blocks

Pro

Compact Week Calendar Block for React

A strip of seven day buttons with marks and counts, the chosen day's events under it and a load bar for 08:00 to 18:00 with the booked and free time in words.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show the week ahead on a dashboard in one narrow card with this compact week for React with Base UI. A strip of seven day buttons for 12 to 18 October 2026 gives each day a weekday letter, the date, up to three marks and a count, and rings Wednesday 14 October as today. Choosing a day, with a click or the arrow keys, lists its events under the strip with their time, place and category, and draws a load bar from 08:00 to 18:00 where the booked stretches are filled in foreground weight. The sum is written out in words from the events, such as 4 h 30 booked, 5 h 30 free, and overlapping events are counted once. A day with nothing on shows an Empty state at the same height. Previous, next and Today Buttons page across three weeks, and the bands are ruled by Guides. Categories are shapes with their words in a legend, never colors. The strip stays seven columns even at 320 px. It's built from Button, Empty and Guides, with a CSS entrance only.

FAQ

How do I fill it with my events?

Edit LINES_DATA. Each line is date|start|end|kind|title|place with an ISO date and wall-clock times, and a kind of meeting, personal, deadline, errand or focus. KINDS gives each kind its mark and its word. The marks, the counts, the list and the load bar are all worked out from that array.

How is the load bar worked out?

Each event is clipped to 08:00 to 18:00 and overlapping events are merged into one stretch, so an hour that has two meetings in it counts once. The booked minutes are summed and the free minutes are the rest of the ten hours. The bar, the words above it and the note about overlaps all come from the same helper. Change OPEN and CLOSE to measure another working day.

How do I move around with the keyboard?

The strip is a group of native radio buttons, so it is one tab stop and the arrow keys move between days and choose them. Each day is named with its full date, whether it is today and how many events it has. Previous and next are buttons that say which week they go to.

Why is today always 14 October?

Nothing in the block reads the clock. AS_OF is the one moment the block treats as now, and the ring on the date and the Today button come from it, so the block looks the same on any day.

What stays local, and how do I wire it up?

Everything. Paging and choosing days only change state in the page and nothing is saved or sent. To make it real, load the events for the visible week from your own API when week changes and keep the rest as it is.

How does it look on a phone?

The strip keeps seven columns even at 320 px: each day shrinks to a letter, a date, up to three marks and a count, and the exact figures are in the button's hidden name. The list and the load bar stack under it.

All 100 calendar blocks