Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Fiscal Quarters Calendar Block for Svelte

Four fiscal quarters on shared hairlines with a target and a result each, where a select sets the month the fiscal year starts and the year's name, the current quarter and its pace are worked out again.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show a company's quarters against their targets with these fiscal quarters for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a status line, four quarter cells on shared hairlines and the chosen quarter's detail. A Native Select in the header sets the month the fiscal year starts (January, April, July or October), and everything is worked out again: the year's name ("FY27"), each quarter's number and months, which quarter 14 October 2026 (the block's fixed "now") is in, and the day of it ("day 14 of 92"). Each cell shows its months, whether it has ended, is current or is ahead, the amount reached against its target and a bar; the current quarter's bar carries a tick where the pace should be, and the detail says "Pace: 15 percent expected, 18 percent reached". Choosing a quarter lists its target, result, the close-the-books and board-pack deadlines as "in N days" and how far the pack is drafted. Quarters sit two by two on a phone, and the bands are ruled by Guides. It's built from Native Select and Guides, with a CSS entrance only. For finance tools, planning suites and any report that depends on a fiscal calendar.

FAQ

How do I fill it with my numbers?

Edit PERIODS. Each is a calendar quarter, named by its first month ("2026-10"), with a revenue target and what was actual so far in whole cents, and how far the board pack is drafted. List every calendar quarter any year start can reach. The two deadlines are typed as days after a quarter ends, in deadlineOf.

How is the fiscal year named and found?

The year starts in the latest chosen month on or before the fixed now, so 14 October 2026 with an April start is in the year that began in April 2026. It is named for the year it ends in, so that year is FY27, and a January start gives FY26. Quarters are numbered from the start month, so the same dates are Q3 in one setup and Q1 in another.

How is the pace worked out?

The expected share is the day of the quarter over its length, 14 of 92 days or 15 percent. The reached share is the amount over the target. Past quarters show where they ended, and quarters ahead show that they have not started. Amounts are whole cents turned into text at the end.

Why are the deadlines on weekdays?

Close books is ten days after the quarter ends and the board pack is 21 days after, and a date that falls on a weekend moves to the Monday after. So Q4 of a January year, which ends on 31 December, closes on Monday 11 January and the pack is due on Thursday 21 January.

How do I use it with the keyboard?

The four quarters are one group of radio buttons: Tab enters it and the arrow keys move between quarters. The year start is a native select with a visible label. A polite status line restates the year and the current quarter whenever the start changes.

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

The year start and the chosen quarter live in the page's state and are not saved. To make it real, read your own ledger into PERIODS and store the year start in the user's settings.