Planner
Date-indexed planning grid whose cells hold your own domain content via a generic cell snippet — week, month or custom range.
Playground
Week 25 – June 2026
Week 25 – June 2026
Today
Loading...
Loading syntax highlighting...01 Examples
Weekly meal plan
The headline use case. Items bucket onto days by `getDate`, `sort` orders them within a cell, and the `cell` snippet renders your own markup. Because `cell` runs for empty days too, the “Add” button is available everywhere.
Week 25 – June 2026
Week 25 – June 2026
Today
Loading...
Loading syntax highlighting...Monthly shift plan
The same component in month view with a different domain type. Cells stay compact; weekend columns are tinted via highlightWeekend.
June 2026
June 2026
Today
Loading...
Loading syntax highlighting...02 Customization
slotClasses + selected day
Restyle any slot (here the header and cells) via `slotClasses`, and track the active day with `bind:selectedDate` — `isSelected` reaches the cell snippet. Clicking a cell's body selects its day; clicks on interactive content keep their own behaviour.
Week 25 – June 2026
Week 25 – June 2026
Today
Loading...
Loading syntax highlighting...Server-safe weeks
Planner and a SvelteKit load function agree on the same week because both use the Svelte-free `@urbicon-ui/blocks/date` subpath — no UTC drift between server and client.
Loading...
Loading syntax highlighting...03 Accessibility
- The grid uses the ARIA
gridpattern:role="grid"wrapsrow/columnheader/gridcell, the active day carriesaria-selected, and a rovingtabindexkeeps a single tab stop. - Keyboard: arrow keys move the focused day, Home/End jump to the week edges, PageUp/PageDown step a month (Shift a year), and Enter/Space select. Navigation pulls the focus back into view by paging when it crosses the visible window.
- Interactive content inside a
cell(buttons, links, inputs) keeps its own Enter/Space and click behaviour — grid navigation only fires from the cell itself, and only a click on the cell body selects the day. - The localized view title is mirrored into an
aria-live="polite"status region, so screen readers announce navigation. Focus rings usefocus-visibleonly. - Transitions and swipe respect
prefers-reduced-motion(setanimated=falseto opt out entirely).
API Reference
30 props 1 required
Add filter
Grouping
Summary
Column visibility
No matching properties |
No matching properties
Installation
Import
Loading...
Loading syntax highlighting...