Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar blocks

Pro

Podcast Schedule Calendar Block for React

A season of eight weekly Tuesday episodes with four stage dots each and a worked-out bank of edited episodes that says how far ahead you are covered, moved by Mark recorded and Mark edited.

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

See how far ahead of the release date you are with this podcast schedule for React with Base UI. Eight episodes go out on Tuesdays from 20 October 2026, each with four dots on one line for Booked, Recorded, Edited and Live, and the stage written in words beside its date. The bank at the top is worked out, not typed: the episodes that are edited and not yet live, with the date they cover you until ("3 in the bank. You are covered until Tue 3 Nov"). Two outline Buttons, Mark recorded and Mark edited, move the next episode on, and the bank and the date move with them; an episode goes Live only when its date has come, worked out from Wednesday 14 October 2026. The frame is ruled by Guides, and the dots stay on a single line on a phone. For podcasters and studios that record in batches.

FAQ

How do I use my own episodes?

Edit START: each episode has a date, a title and a stage of 1 (booked), 2 (recorded) or 3 (edited). The dots, the stage words and the bank are all worked out from those values; Live is never typed.

How is the bank worked out?

bankOf counts the episodes at Edited that are not yet live. coverText then walks the season from the first episode and stops at the first one that is not edited, so the date it prints is the last episode in an unbroken run. If an edited episode sits behind an unedited one, it is in the bank but does not extend the cover.

Which episode do the buttons move?

Mark recorded moves the first episode that is only booked, and Mark edited moves the first that is recorded, both in air-date order. When there is none, the button stays in the page, says so in the status line, and keeps keyboard focus.

Why is nothing Live yet?

Every episode airs after Wednesday 14 October 2026, the fixed moment the block treats as now. An episode shows Live when its date is on or before TODAY, so change AS_OF to see the first ones go out.

Are the dots the only way to see the stage?

No. The dots are decorative and hidden from assistive technology; each row also says the stage as a word under its title, so nothing depends on how the dots look.

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

Everything. Stages live in the page and reset on reload. To make it real, save the new stage from advance to your own API and load the season from there.

All 100 calendar blocks