Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar blocks

Pro

Maintenance Schedule Calendar Block for React Aria

One maintenance window planned against an hourly traffic chart: a date from the calendar with a change freeze struck out, a start hour and length, services affected and a worked-out impact.

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

Plan the quietest hour for planned work with this maintenance schedule for React with React Aria. A hairline frame with a plus mark on each corner puts the date and the window at the start and the traffic at the end. The Calendar picks the day, with past days and a change freeze from 27 to 29 November struck out and a dot under any day that already has a window; a native select picks the start hour in UTC and a Toggle Group picks one, two or four hours. A chart of 24 bars, one for each hour's typed requests, shades the hours inside the window. Three services have typed shares of the traffic, and the ones you tick feed "Estimated impact", the window's requests times the affected share over the day's requests, as a percent of the day. A window that overlaps one already planned says so. "Pick the quietest window" sets the start for the chosen length, and "Schedule window" ends in a line that says nothing was announced. It's built from Calendar, Native Select, Toggle Group, Checkbox, Shine Button and Guides, with a CSS entrance only. For ops teams, release managers and any change that is cheaper at 03:00.

FAQ

How do I use my own traffic and services?

Edit HOURLY (requests per hour in thousands for a weekday), WEEKEND_PART (the share a weekend day carries), SERVICES (each with its share of requests in percent) and PLANNED (the windows already booked). The chart, the totals, the impact and the quietest start are worked out from those.

How is the estimated impact worked out?

It adds the requests in the hours of the window, multiplies by the combined share of the services you ticked and divides by the requests in the whole day. Tick fewer services and the figure falls; a longer window or a busier hour raises it. It's an estimate from the numbers you give it, not a promise.

How do I change the freeze and the dates you can plan?

Set FREEZE_FROM and FREEZE_TO. Days before the fixed "now", 14 October 2026, and the freeze are marked unavailable in the calendar on every target, and FIRST_DAY and LAST_DAY bound how far you can page.

What does Pick the quietest window do?

It tries every start hour that fits the chosen length on the chosen day and picks the one with the fewest requests, the earliest if two tie. It sets the start; you still choose whether to schedule.

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

Everything. Scheduling only writes a line to the status; nothing is announced, booked or saved. To make it real, post the date, start and length to your change system in the schedule handler, load HOURLY from your metrics, and keep the rest.

All 100 calendar blocks