shadcn.io is not affiliated with official shadcn/ui
Calendar Event Notification Block for Solid
A meeting about to start in a scheduling app: a catalog Timer counting down to it with a Pause, the agenda with start times, who is coming with an RSVP, Join call, Snooze 5 minutes and a real calendar file to download.
Installation
Overview
Remind people of a meeting just before it starts, with this calendar event notification for Solid with Ark UI. It is Slotmoor, a scheduling app, telling you the design standup begins in ten minutes, in three bands. The first has the event's facts in a Data List and the catalog Timer counting the minutes and seconds down to the start, with a Pause that holds it. The second lists the agenda, each item with its start time worked out from the lengths before it, and who is coming as an Avatar group with an RSVP in a Segment Group (Yes, Maybe, No) whose counts follow your answer. The third holds the actions: Join call, the one Shine Button; Add to calendar, a real download of an .ics file; and Snooze 5 minutes. Guides draw the lines. For meeting reminders, class starts, webinars and anything with a start time and a join link.
FAQ
How do I fill it with my own event?
Edit EVENT (the title and the start as an ISO time in UTC), AGENDA (each item has minutes; their sum is the length and the end time) and PEOPLE (initials, name and answer). AS_OF is the page's fixed "now": the countdown starts at the start time minus that, so in your app give the Timer the real time left, and format times in the viewer's zone if you prefer.
Does the countdown run by itself?
It begins once the page is running in the browser (the server draws dashes), counts down from the typed ten minutes and stops at zero, where the card says it is starting now. A visible Pause holds it and Pause again lets it go on, from the same moment. Under reduced motion the seconds are hidden and the clock moves by the minute. The digits are decorative: the sentence beside them ("Starts in 9 minutes") carries the time, and it changes only once a minute.
Is the calendar file real?
Yes. Add to calendar downloads a standards-based .ics file built from the typed event: the title, the start and end in UTC, the agenda in the description and an alarm five minutes before, with CRLF line ends and long lines folded. Open it in any calendar app. The time is fixed on 14 October 2026, so replace EVENT before you ship it.
What really happens when I press the buttons?
Join call only says what it would do ("In your meeting app this opens the call") and opens nothing. Your RSVP, the snooze and the pause live on this page: your answer changes the counts, Snooze 5 minutes sets the next reminder to a time five minutes after the page's now and Undo snooze takes it back. Nothing is sent to the others. In your app send the RSVP to your server and schedule the reminder there.
Does anything move when I answer, snooze or pause?
No. The countdown cell keeps its size, the counts line has room for its longest wording, the next reminder is always a line of the facts ("None" until you snooze), and the status line keeps two lines on a screen of ordinary width and three on a phone.