shadcn.io is not affiliated with official shadcn/ui
Holiday Manager Calendar Block for Ark UI
The catalog Calendar for November with public holidays and company days marked by shape for two invented regions, working-day counts for three months, a form that adds a company day and Remove.
Installation
Overview
Mark every day off on one calendar with this holiday manager for React with Ark UI. A hairline frame with a plus mark on each corner starts with a region NativeSelect (the invented Northmark and Southvale) and three figures: the working days remaining in October, November and December, worked out from the weekdays, the region's holidays and the company days (19 in November for Northmark). Under it the Calendar opens on November 2026 with a hatched mark on every public holiday and a bar on every company day, with the shape and its word in a legend and in each day's name; choosing a day says what it is. A list at the end holds the days off for the quarter, and an "Add a company day" form with a date Input, a name and an outline Button puts a row in the list and a mark on the Calendar at once, checking weekends and days already off. Remove takes a company day out. The holidays are fictional, so no date can be wrong. The bands are ruled by Guides. For HR tools, team planners and any app that counts working days.
FAQ
How do I use my own holidays?
Edit REGIONS: each has an id, a name and a list of holidays with an ISO date and a name. START_COMPANY holds the company days that exist when the page opens, and FIRST_DAY and LAST_DAY set the span the Calendar can page through. The counts and the marks 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?
For each of the three months, every weekday that is not a holiday of the chosen region and not a company day. Changing the region or adding or removing a company day recounts at once, and the status line says what changed.
Why are holidays shapes and not colors?
A hatched square marks a public holiday and a bar marks a company day, and each day's accessible name says which. The catalog Calendar's own today marker is switched off on every base, and the fixed "now" gets a ring instead, so the page looks the same on any day.