Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar blocks

Pro

Focus Time Calendar Block for React Aria

A week of meetings with the free windows of an hour or more worked out for each day, one bookable as focus, a weekly goal slider, a tally bar and one Protect button.

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

Keep a window a day for deep work with this focus time planner for React with React Aria. Monday to Friday of 19 to 23 October 2026 each get a band with their meetings drawn as a thin bar from 09:00 to 18:00, and under it the free windows of an hour or more between them, worked out from the meetings, such as 10:00 to 11:30, 1 h 30. Choose a window to book it as focus, one a day at most, and press it again to release it; a shield marks it and it is hatched on the bar. A day with no window of an hour says so. A Slider sets the weekly goal from 6 to 20 hours, a Progress bar tallies the focus planned against it, and the one primary ShineButton protects the booked windows in this page only. It's built from Slider, Progress, ShineButton and Guides, with a CSS entrance only.

FAQ

How do I fill it with my meetings?

Edit LINES_DATA. Each line is date|start|end|title with an ISO date and wall-clock times, and DAYS lists the days. OPEN, CLOSE and LEAST set the working day and the shortest window worth protecting. The windows, the bars and the totals are worked out from the meetings.

How are the free windows worked out?

The meetings of a day are sorted and the gaps between them, from the start of the day to the first meeting, between meetings and from the last meeting to the end of the day, are kept when they are LEAST minutes or more. Each window is a checkbox, and booking one books the whole window.

What does the weekly goal do?

It sets the target for the tally. The bar fills with the hours booked against it, and the text says how many hours remain or that the goal is reached. Booking is never blocked by the goal.

What does Protect do?

In this demo it only marks the booked windows as protected and says so: nothing in your calendar is changed. To make it real, create a focus event for each booked window from protect with your calendar's API.

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

Everything. Booking, the goal and Protect only change state in the page, and a reload brings back the three starting windows.

How does it look on a phone?

Each day is a band that stacks its title, its bar and its windows, and the windows wrap onto more rows when they have to. The Protect button spans the full width at the foot.

All 100 calendar blocks