Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar blocks

Pro

Team Schedule Calendar Block for React

A status board of six people by the hours 09:00 to 17:00 over three days, with a shape and a word in each cell, a button on every hour that lists who is free then, and the best hour worked out.

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

Find the hour most of a team can meet with this team schedule for React with Base UI. A hairline frame with a plus mark on each corner holds a table of six people down the side and the nine hours from 09:00 to 17:00 across the top. Each cell is a status drawn as a small shape and named in words (Free, Busy, In a meeting or Out), so nothing depends on a color. Every hour heading is a button that shows how many people are free then; choosing one lists who they are under the table ("Free at 14:00: Alex and Marcus, 2 of 6"), and a line beside it names the hour with the most people free and takes you there. Previous and next Buttons page between three days, Tuesday 13 to Thursday 15 October 2026, and a Badge marks the day that is today. People are initials in an Avatar, the names stay in place while the hours scroll on a phone, and the bands are ruled by Guides. It's built from Avatar, Badge, Button and Guides, with a CSS entrance only. For team calendars, meeting planners and any tool that finds a time that suits most of a group.

FAQ

How do I fill it with my team?

Edit PEOPLE and ROWS. Each row is a person on a day with one letter per hour from 09:00 to 17:00: f for free, b for busy, m for in a meeting and o for out. STATUSES gives each letter its shape and word. The counts under the hour headings, the list of who is free and the best hour are all worked out from those letters.

How is the best hour chosen?

For each hour the block counts the people marked free and picks the first hour with the highest count. If two hours tie, the earlier one wins, and Go to takes you straight to it.

Why are the statuses shapes and not colors?

A color alone can't be told apart by everyone, and it can't print. Each status has its own shape and its word in the legend, and every cell carries the word for a screen reader ("14:00: Free").

Why is today always 14 October?

Nothing in the block reads the clock. AS_OF is the one moment it treats as now, so the Today badge and the opening day are the same on any date and in a screenshot.

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

Everything. Choosing an hour or a day only changes state in the page, and no one is invited or told. To make it real, load each person's busy times for the visible day from your calendar API, turn them into the status letters and keep the table as it is.

How does it look on a phone?

The table scrolls sideways inside its frame with the names held at the start, the roles and the minutes in the hour headings are dropped, and the list of who is free sits under the table.

All 100 calendar blocks