Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar blocks

Pro

Mini Widget Calendar Block for React

A sidebar-sized calendar with a mark on every day that has events, month and year jumps, a Monday or Sunday week start and an Up next list for the chosen day.

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

Put the team's calendar in a sidebar or a dashboard column with this mini calendar widget for React with Base UI. A hairline frame with a plus mark on each corner holds the Calendar at its own small size, with a month and a year to jump to, and under every day that has events up to three marks, each a different shape (a dot, a ring, a diamond, a bar or a hatched square) so a category is never only a color. A Toggle Group switches the week between starting on Monday and on Sunday, and the grid is laid out again. Choosing a day lists up to three of its events in the band underneath, with their time, category word and place ("Up next on Thu 15 Oct"); a day with nothing on shows an Empty state at the same height with a button to the next day that has something. The calendar's own marker for today is switched off, and the fixed "now", 14 October 2026, carries a ring instead. The bands are ruled by Guides. It's built from Calendar, Toggle Group, Empty, Button and Guides, with a CSS entrance only. For intranets, dashboards, side panels and anything that needs a month in a narrow column.

FAQ

How do I fill it with my events?

Edit EVENTS: each has an ISO date, a wall-clock start such as 10:00 (empty for an all-day event), a title, a place and a mark. KINDS gives each mark its word. The marks under the days, the Up next list and the counts are all worked out from that array, and FIRST_DAY and LAST_DAY set how far the month and year jumps reach.

Why is the ring always on 14 October?

The calendar component marks today from the browser's clock by default. This block switches that marker off on every library and draws its own ring on a fixed TODAY, so the block looks the same on any day and in a screenshot. To follow the real date, set AS_OF from your own clock and keep the rest.

How does the week start switch work?

It passes the week's first day to the calendar, which lays the columns out again and keeps the chosen day. react-day-picker takes weekStartsOn with the same numbers. The weekday names stay in English; set the calendar's locale to translate them.

How does a screen reader get the events?

Each day button is named with its full date, whether it is today and how many events it has ("Thursday 15 October, 3 events"), and the marks themselves are hidden from assistive technology.The category is always a word in the list, never a mark alone.

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

The chosen day and the week start live in the page and nothing is saved or sent. To use real events, load the events for the visible months from your own API, update EVENTS and keep the rest of the component as it is.

How does it look on a phone?

It is already a single narrow column, so nothing is rearranged: the calendar keeps seven columns that shrink with the screen, and the Up next band holds the same height whether it lists events or shows the empty state.

All 100 calendar blocks