shadcn.io is not affiliated with official shadcn/ui
Release Calendar Music Block for Radix UI
A month grid of October releases with tiny drawn covers on each day, a day list with a reminder switch per release, a lead select that works out every reminder date, and a real .ics download of the reminders.
Installation
Overview
Let listeners follow new music, with this release calendar for React with Radix UI. It holds Fridaywire's October in a hairline frame with a plus mark on each corner, and a side cell at the end. The month is a grid of seven columns where each day is a button with up to three tiny drawn covers and a count; the grid is one tab stop you move through with the arrow keys, Home and End. Choosing a day lists its releases in the side cell, each with a cover, the artist and title, an Album, EP or Single Badge, a genre and a Remind me Switch named for the release. A lead Native Select in the header (On the day, 1 day before, 1 week before) works out every reminder date again, such as "Reminder: Thu 22 Oct", and the heading counts the reminders on. Releases already out can't be reminded. Download .ics saves the reminders as a calendar file. For music sites, labels and newsletters.
FAQ
How do I load my own releases?
Edit RELEASES: each has an id, an ISO iso date, artist, title, a kind (Album, EP or Single), a genre and a drawn art (a pattern and a ground). The covers are paths in foreground weights over a muted ground, so they follow the theme; swap Cover for an image if you have artwork. CELLS builds the five weeks around October from the first Monday, and AS_OF is the fixed today.
How is a reminder date worked out?
It is the release date minus the lead, but never before the fixed today of 18 Oct: a release inside the lead window is reminded today. So "1 week before" on a release on 23 Oct gives 18 Oct, and "On the day" gives 23 Oct. Changing the lead updates every row and the calendar file at once.
What does Download .ics save?
A real calendar file with one all-day event per reminder that is on and not yet out, with the date the reminder falls on, a typed stamp and line ends as the format asks. Open it in any calendar app. With no reminder on, the button stays reachable and tells you to turn one on first instead of saving an empty file.
How do I use the grid from the keyboard?
Tab reaches the grid once, on the chosen day. Arrow keys move a day or a week, Home and End go to the start and end of the week, and Enter or Space chooses the day. The grid stops at the first and last of October. Each day is named with its date and the number of releases, and today is marked in the name.