Schedule Alpha
overview
A Kanban-style schedule board for assigning schedule items to specific days of the week.
Overview
Schedule Alpha is a Kanban-style schedule board that empowers you to arrange items in Monday to Sunday columns.
When designing this frame, we wanted to make sure to check the following boxes:
- Query loop compatible (from a single query loop)
- Compatible with faceting
- Accessible
- Automatically places items by weekday
- Automatically arranges items by time
- Degrades gracefully on mobile
We’re happy to say that we checked every single box!
This schedule uses CSS grid and places items into columns via data attributes. This allows you to easily assign an item to a specific day of the week and not worry about grid column numbers. It also allows the easy and logical placement of items from a weekday custom field.
On mobile, the schedule stacks into a single column while retaining proper grouping of the cards.
The companion frame, Schedule Card Alpha, gives you an item detail card with item name, related location, time, duration, related persons, and related custom posts.
Lastly, there’s a companion modal, Event Modal Alpha, for seeing expanded information related to each schedule item.
Companion Files
Variables
Accessibility Notes
The heading of the cards is a button element that is preconfigured to fire Event Modal Alpha, which is inserted into the first card element by default.
Additionally, the cards use clickable-parent and focus-parent techniques for maximum accessibility for keyboard users.
This frame uses the clickable parent technique.
Related Components
FAQs
I need a kanban-style layout for a separate use case. Can I still use this?
Yes, absolutely! This can be manipulated to support more or less columns, different column headers, etc. If you need a Kanban-style board for anything, you should be able to use this frame without issue.
Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.