Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar blocks

Pro

Campaign Timeline Calendar Block for React Aria

Five marketing channels as bars over ten weeks with a launch rule, where a switch pauses a channel and the budget in play is worked out again in whole cents.

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 a campaign across channels with this campaign timeline for React with React Aria. A hairline frame with a plus mark on each corner holds a native table of five channels (Email, Social, Paid, Events and Partners) by ten weeks from Monday 12 October 2026, with Plan, Launch and Post in its head, a heavy rule at the launch on 9 November and a thin rule at 14 October, the block's fixed "now". Each channel is a bar with its budget on it, and a Switch on the channel pauses it: its bar becomes a dashed outline that says Paused, and the budget in play under the table is worked out again ("Budget in play: $48,000 to $36,500."). Choosing a bar states its dates and its share of what is in play. A legend gives every line its word. The table scrolls sideways under sticky channel names, and the bands are ruled by Guides. It's built from Switch and Guides over a native table, with a CSS entrance only. For marketing planners, launch calendars and any budget that follows a schedule.

FAQ

How do I fill it with my channels?

Edit CHANNELS. Each has an id, a name, ISO start and end dates and a cents budget in whole cents. Change RULER_START, RULER_DAYS, WEEKS and LAUNCH to move the ruler and the launch rule, and the phase headings in the table's head to match. The totals and shares are worked out from the array.

Why are budgets whole cents?

Adding decimals can drift by a cent, so every amount is an integer number of cents and is only turned into text at the end, with a currency formatter you can change at the top of the file. Shares are rounded whole percents of the budget in play.

What happens when I pause a channel?

The channel's bar turns into a dashed outline labeled Paused, its status word changes, and its budget leaves the total, so the figure under the table and the share of every other channel change. Turning the switch back on restores it. A paused channel can still be chosen to read its dates.

How do I use it with the keyboard?

Each channel has a switch named "Email running" and a bar that is a button, pressed when chosen and named with its dates, budget and whether it is paused. The table is a scroll region you can reach with Tab. The time axis keeps its left-to-right order in right-to-left languages, and amounts are isolated so they read correctly.

How does it look on a phone?

The table keeps its ten weeks and scrolls sideways under a sticky first column that holds each channel's name, status and switch, so the controls stay in reach while you look along the bar. The totals and the legend stack under it.

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

The switches and the chosen bar live in the page's state and reset on reload; nothing is saved or sent. To make it real, store each channel's paused flag in your planner and send it from the switch's handler, then load the budget from the same place.

All 100 calendar blocks