Skip to main content
Urbicon UI

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
Mon 15Tue 16Wed 17Thu 18Fri 19Sat 20Sun 21
Mon 15
Overnight Oats
Caprese Salad
Lentil Curry
Tue 16
Avocado Toast
Margherita Pizza
Wed 17
Ramen Bowl
Thu 18
Berry Pancakes
Falafel Wrap
Risotto ai Funghi
Fri 19
Tacos al Pastor
Sat 20
Poke Bowl
Sun 21
Shakshuka
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
Mon 15Tue 16Wed 17Thu 18Fri 19Sat 20Sun 21
Mon 15
Overnight Oats
Lentil Curry
Tue 16
Ramen Bowl
Wed 17
Avocado Toast
Margherita Pizza
Thu 18
Fri 19
Tacos al Pastor
Sat 20
Sun 21
Shakshuka
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
Mon Tue Wed Thu Fri Sat Sun
1
2
3
4
5
6
7
8
Early · Mara Night · Jon
9
10
Late · Ada
11
Early · Leo
12
Night · Mara
13
14
15
Early · Ada Late · Jon
16
17
18
Late · Leo
19
20
21
22
Night · Ada
23
24
25
Early · Mara
26
27
28
29
30
1
2
3
4
5
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
Mon 15Tue 16Wed 17Thu 18Fri 19Sat 20Sun 21
Mon 15
09:0014:00
Tue 16
11:00
Wed 17
Thu 18
10:0016:00
Fri 19
13:00
Sat 20
Sun 21
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 grid pattern: role="grid" wraps row/columnheader/gridcell, the active day carries aria-selected, and a roving tabindex keeps 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 use focus-visible only.
  • Transitions and swipe respect prefers-reduced-motion (set animated=false to opt out entirely).

API Reference

30 props 1 required

No matching properties

No matching properties

Installation

Import

Loading...
Loading syntax highlighting...