About this set
A phone-sized agenda: a sticky title bar with the month and event count, then one sticky heading per day and the events under it, each with a start time, a coloured marker, a title and its length and place. Today is labelled Today and coloured violet, and a day with no events says Nothing scheduled instead of disappearing. Use it as the mobile view of a calendar app, a conference schedule or a booking list. The panel is a fixed-height scroll container; the title bar is sticky at the top, and each day heading is sticky just below it, so the current day stays visible while its events scroll past. Day headings are real h3 elements and each day’s events are a list, so screen reader users can jump between days by heading. Because the panel scrolls on its own, it is a focusable region with a label, so keyboard users can scroll it with the arrow keys. Grey text was darkened to 4.5:1 contrast. The Bootstrap version uses .card and .list-group-flush, and the Tailwind version builds the same sticky layers from utilities.
What’s included
- Sticky title bar plus sticky day headings
- Day headings as h3, events as lists
- Empty days say "Nothing scheduled"
- Keyboard-scrollable labelled region
- Plain CSS, Bootstrap .list-group and Tailwind versions of the same design
Accessibility
Day headings are h3 elements and events are list items with their time in a time element. The scrolling panel has tabindex="0", role="region" and an aria-label, and shows a 2px violet outline on keyboard focus. Today is identified by the word Today, not only by colour. Nothing animates.
Customise it
Change --ag-accent, --ag-muted and --ag-bar (the title bar height that the day headings stick under) on .agenda in plain CSS and Bootstrap, or the --color-ag-* theme colours in Tailwind. The panel size is the 340px width and 600px height.
