shadcn.io is not affiliated with official shadcn/ui
Celebration Dates Calendar Block for Vue
The month's birthdays, work anniversaries and milestones grouped by week, with years worked out from start dates, a type filter, a Sign the card button on each and a count of the cards you signed.
Installation
Overview
Keep a team's celebrations from slipping past with this celebration dates calendar for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a ToggleGroup that filters by type (birthdays, anniversaries, milestones, each with its count) and a line that says how many cards you have signed. Below it the month's twelve celebrations sit in a held scroll region grouped by the week of October they fall in, with "Week of Mon 12 Oct, this week" worked out from a fixed 14 October 2026. Each row has a date tile, the name, what it is ("5 years with the team", worked out from a start date), "In 5 days" or "2 days ago", the initials of the people who signed the card and an outline Button, "Sign the card", that adds yours at the front and changes to "Signed". Past celebrations show "Card sent". An Empty state fills the region when every type is turned off. The bands are ruled by Guides. For HR tools, team intranets and any app that remembers the people behind the work.
FAQ
How do I use my own celebrations?
Edit CELEBRATIONS: each has an id, a name, initials, an ISO date in the month, a kind of birthday, anniversary or milestone, a since start date for an anniversary, a note for a milestone and the signers who signed already. The weeks, the years and the day words 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 years worked out?
An anniversary's years are the year of its date minus the year of its since date. Birthdays show no age on purpose: a work tool does not need to say how old someone is. A milestone shows the sentence you typed.
How are the weeks decided?
Each celebration goes under the Monday of its week. The group that holds the fixed "now" says "this week", and a week with nothing remaining after the filter disappears, so the list never shows an empty heading.