Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar blocks

Pro

Employee Onboarding Calendar Block for Radix UI

A new starter's 18 tasks in three phases, with every due date worked out from a start date you can change, weekends rolled to Monday, an Overdue flag and a progress bar of what is done.

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 new starter's first month from a single date with this employee onboarding calendar for React with Radix UI. A hairline frame with a plus mark on each corner opens with a start date field (Monday 19 October 2026 to begin with) and a count of what is done, "4 of 18 done", over a Progress bar. Under it an Accordion holds three phases (Before day one, Week one and First month), each with how many of its tasks are done and how many are overdue. Every task is a Checkbox row with its due date, the moment it is for (a week before, Day 1, Day 3, Week 2, Day 30), its owner as a name and as initials in an Avatar, and an Overdue badge when it is due before 14 October and not ticked. Change the start date and every due date is worked out again; a due date that falls on a weekend rolls on to the Monday. A date that isn't a date says so and keeps the last good one. It's built from Accordion, Checkbox, Progress, Avatar, Badge and Input, with a CSS entrance only. For people teams, managers and any plan that starts from a joining date.

FAQ

How do I change the tasks and their timing?

Edit TASKS. Each task has a label, an owner, a phase, an offset in calendar days from the start date (negative is before it) and the words in when that describe the moment. The due date, the weekend roll, the Overdue flag and the counts are all worked out from the offset and the start date.

What happens when a due date lands on a weekend?

It moves to the Monday after. A task due on a Saturday or a Sunday is shown with that Monday's date, so no task is ever due on a day nobody is in. If your team works weekends, change rollOf.

When is a task overdue?

When its due date is before the fixed "now", 14 October 2026, and it isn't ticked. Choosing an earlier start date makes more tasks overdue and a later one makes fewer; ticking a task clears its flag. The word is in the row, not only an icon.

What if the start date is empty or invalid?

A message appears under the field, the rest of the page keeps the last good date, and the status line says so. Dates must fall in 2026 or 2027.

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

Everything. The ticks and the start date live in the page and are gone on reload; nothing is saved or sent. To make it real, store the ticks per starter in your own database, take the start date from your HR system and keep the date arithmetic as it is.

All 100 calendar blocks