shadcn.io is not affiliated with official shadcn/ui
Month Calendar Events About Block for Ark UI
The standing events of an event hosting company drawn as a month at a glance with no month name: a seven by five table of days with the recurring events marked by shape, and the same events as a dated agenda with a Subscribe link.
Installation
Overview
A month at a glance for React with Ark UI, written for Gatherhall, a fictional event hosting company. The block is a split. At the start, a seven by five table of days in a frame, Monday to Sunday, with no month name because the pattern is the same every month: the first Thursday is a filled cell, every Tuesday a dot, the third Wednesday a diamond and the last Friday a ring, with a legend under the table. At the end, behind a divider that meets the top rule with a plus, the same events as a dated agenda, and a Subscribe link as the block's Shine Button. Every marked day is worked out from recurrence rules in the data (first, third, last, every), so the table and the agenda can't disagree. On a phone the agenda sits under the table. It's built from Shine Button and Guides, with CSS for the entrance and your theme's tokens for every colour. For about pages and venue pages that want to say when things happen without a calendar widget. The events are example data.
FAQ
How do I change the events?
The events are RULES at the top of the file: a title, a time, a place, a weekday (0 is Monday), a mark and how its days are picked: every, the nth one (nth: 3 is the third) or the last. The sample month is DAYS long and starts on the weekday given by LEAD. The marked days and the agenda are both worked out from the rules.
Why isn't there a month name?
The events repeat every month, so the table shows the pattern, not one month. It is a sample month; the weekdays slide from one month to the next while the rules don't. If you need real dates, pass the first weekday and length of the month you want.
How is it read by a screen reader?
The days are a real table with a caption and column headers for the weekdays. A day with an event reads its number and then the event's name, for example "2, Demo day". The legend and the agenda are lists, and the agenda is ordered by day. The shapes are decoration and hidden from assistive technology; the words say it all.
Why shapes and not colours?
Colour alone isn't enough to tell four events apart, and the block keeps the page's primary colour for its one action. The four shapes (a filled cell, a dot, a diamond and a ring) are different in outline, and the legend and the agenda repeat them next to the event's name.