Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar blocks

Pro

Sales Pipeline Calendar Block for React

A close forecast with four month columns of open deals, weighted by stage probability in whole cents, a progress bar against quota and a Push to next month button that re-works the columns.

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

Forecast the next four months of closes with this sales pipeline calendar for React with Base UI. Open deals sit as buttons in the month they are expected to close, October 2026 to January 2027, each showing its amount, its stage word and its close date. The figure at the head of every column is the weighted forecast: each deal's amount times its stage probability, 10 percent for Qualified, 30 for Proposal, 60 for Negotiation and 80 for Verbal commit, all worked out in whole cents. A Progress bar below sets the total against a typed quota. Choose a deal and the outline Button "Push to next month" moves it one month on, then the columns and the total are worked out again and the status line reads the change back ("Dec forecast $30,000 to $17,200"). On a phone the columns scroll sideways and the next one stays in view. The frame is ruled by Guides. For CRMs, revenue ops and forecast reviews.

FAQ

How do I load my own deals and stages?

Edit START and STAGES. A deal has a name, its amount in whole cents, a close ISO date and a stage number that indexes STAGES, where each stage has a word and a percent. Set the months in CLOSE_MONTHS and the quota, in cents, in QUOTA. Names here are descriptive labels, not real customers.

Why are amounts in cents?

Money is kept as whole numbers so sums never pick up rounding noise. weightedOf multiplies first and divides last, then each column adds whole cents. The text is formatted with Intl.NumberFormat at the end only, and the amounts stay left to right in a right-to-left page.

What does Push to next month do to the date?

It keeps the same day number in the next month, held to that month's length, and the deal moves to that column. A deal already in the last month refuses and says so. Focus returns to the moved deal after the move.

Is the quota bar the weighted total or the sum of amounts?

The weighted total. A deal that is only qualified counts for a tenth of its value, which is what makes the forecast something you can plan against. The words beside the bar give the exact figures and the percentage.

How are the columns read by a screen reader?

Each month is a list named for its close month, and each deal is a button that reports whether it is chosen. The weights are written out under the quota bar, so no meaning depends on the bar.

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

Everything. Moves live in the page and reset on reload. To make it real, save the new close from push to your CRM and reload the deals from it.

All 100 calendar blocks