Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar blocks

Pro

Leave Tracker Calendar Block for React Aria

Leave balances with bars, a request form that counts working days and says which weekend days and holidays are not counted, the balance after, a warning for colleagues also out and a request list with Withdraw.

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

Let people ask for leave and see the cost with this leave tracker calendar for React with React Aria. A hairline frame with a plus mark on each corner splits in two. At the start are three balances with a Progress bar each (annual leave 14.5 of 25 days, sick and other) and a request: two date Inputs and a NativeSelect for the type give "5 working days (2 weekend days and 1 holiday not counted)" for the dates 23 to 30 October, the balance after the request, and a line for each colleague who is also out on those days. The primary ShineButton, "Request leave", adds a Pending row at the top of the list at the end, with a glyph and a word for its state, takes the days off the balance as pending and says "Requested in this demo". Withdraw puts the days back. Dates are checked against a fixed 14 October 2026, and the holidays are those of the invented region Northmark. The bands are ruled by Guides. For HR tools, team planners and any app that handles time off.

FAQ

How do I use my own balances and colleagues?

Edit TYPES (each has a total and the days remaining before any pending request), START_REQUESTS, TEAM (a name and the days a colleague is out) and HOLIDAYS. The counts, the balance after and the warnings are worked out from them.

Why is today always 14 October?

Nothing in the block reads the clock. AS_OF is the one moment it treats as now, and every day count, derived date and ring comes from it, so the block looks the same on any day and in a screenshot. To follow the real date, set AS_OF from your own clock or server and keep the rest as it is.

How are the working days counted?

Every day from the first to the last date, inclusive, that is a weekday and not in HOLIDAYS. The summary says how many weekend days and holidays were not counted, and the balance after subtracts only the working days.

What does Request leave check?

That both dates are chosen, the end is not before the start, the start is today or later, at least one working day falls in the range and the balance is enough. A problem is written under the form and announced; nothing is added until it passes.

How does a pending request change the balance?

Its days are taken off the balance of its type straight away and shown as remaining, so you cannot request the same days twice. Withdraw removes the row and gives the days back. Approved rows are history and are not counted again.

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

Everything. Requests live in state and reset on reload; nobody is asked to approve anything. To make it real, post each request from request to your own API and start requests and the balances from what it returns.

All 100 calendar blocks