shadcn.io is not affiliated with official shadcn/ui
Conference Agenda Calendar Block for Solid
A three-day conference programme in a window: tracks as columns against 30-minute rows, a day switch, a track toggle, and a foot strip with the chosen session's speaker, room and type.
Installation
Overview
Lay out a conference programme in one window with this conference agenda for Solid with Ark UI. A framed window with a plus mark on each corner has a top bar with the day and a Segment Group for Day 1, Day 2 and Day 3 (Tuesday 10 to Thursday 12 November 2026, typed), and a Toggle Group that shows or hides the Main stage, Workshops and Lightning tracks. Each track is a column, with its fill a pattern rather than a colour, against 09:00 to 17:30 in half-hour rows; a session is a button that spans its length, and a lunch band crosses all three tracks. Choosing a session fills the strip at the foot with the speaker's initials and name, the room, the type and the time. Only the grid scrolls, with the track names and the hours kept in view. On a phone the grid gives way to Tabs, one track at a time, each listing its sessions in time order. There is no starring or personal schedule here. It's built from Segment Group, Toggle Group, Tabs, Avatar, Badge and Guides, with a CSS entrance only. For conference sites, event apps and any programme that has more than one room.
FAQ
How do I fill it with my own programme?
Edit LINES, TRACKS and DAYS. Each line is a day, a track, a start and end time on the half hour, a type, a room, a speaker and a title, separated by bars. The grid rows, the spans, the counts and the foot strip are all worked out from those lines.
What does the track toggle do?
It collapses a track's column, so the remaining ones share the width. Hide all three and the grid says so and keeps its height. On a phone the toggle is replaced by tabs, because three columns don't fit.
Why are the tracks patterns and not colours?
Colour can't carry the track for everyone and doesn't survive a print or a grayscale screenshot. A solid band, hatching and dots tell the tracks apart, and each session's name also says its track.
How do I use it with a keyboard?
Tab reaches the day switch, the track toggle, the programme region and then each session in time order within its track. Enter or Space chooses a session; choosing it again clears the strip. The region can be scrolled with the arrow keys once it has focus.