Birthday Tracker Calendar Block for React

Edit PEOPLE. Each has an id, a name, initials, a relation, a mark for the month view and a born date as an ISO string. Only the day and the month of born repeat; the year gives the age. The days until, the age a person turns and the sort order are all worked out from those dates and the fixed "now", so none is typed.

Nothing in the block reads the clock. AS_OF is the one moment the block treats as now, so "Today", "Tomorrow" and "In 12 days" look the same on any day and in a screenshot. To follow the real date set AS_OF from your own clock and keep the rest. The calendar's own today marker is switched off so that it can't disagree with the ring.

Choosing a day, with a click or the arrow keys, lists the people whose birthday falls on it, with the age they turn that year. The marks under the days are a dot for family, a ring for friends and a diamond for work, with the words in the key under the calendar. Use the month and year menus or the arrows to move; the menus reach from January 2026 to December 2027.

No. They live in the page and reset on reload, and a polite status line says each change ("Gift sorted for Casimir Ostrow. 3 of 12 sorted."). To keep them, save the ticked ids from tick to your own store and start sorted from them.

Each checkbox is named with the person ("Gift sorted for Juniper Hale") even though the visible words are shorter, the avatars are decorative and the dates are written out, so nothing depends on color. In the month, each day button is named with its date and how many birthdays it has, and the marks are hidden from assistive technology.

Each row is two lines, with the name above the relation, age and date, and the days to go above the checkbox at the end. The month keeps seven columns that shrink with the screen, and both views hold the same height so switching never moves the page.