Calendar Grid
A 7-column x 5-6 row grid showing a calendar month, with each day cell hosting event chips. Supports keyboard navigation between days, multi-day event spans, and view-switching between Month / Week / Day.
$ prime install @community/pattern-calendar-grid Projection
Always in _index.xml · the agent never has to ask for this.
CalendarGrid [pattern] v1.0.0
A 7-column x 5-6 row grid showing a calendar month, with each day cell hosting event chips. Supports keyboard navigation between days, multi-day event spans, and view-switching between Month / Week / Day.
Loaded when retrieval picks the atom as adjacent / supporting.
CalendarGrid [pattern] v1.0.0
A 7-column x 5-6 row grid showing a calendar month, with each day cell hosting event chips. Supports keyboard navigation between days, multi-day event spans, and view-switching between Month / Week / Day.
Facts
Label
Calendar Month Grid
Problem
Time-based work (meetings, content schedules, deadlines) needs a spatial view that aligns with users' mental model of weeks and months — not a flat list.
Solution
Render the month as a 7-column grid, with weekday headers on top and day cells below. Each day cell shows the date number plus stacked event chips truncated with '+ N more'. Active day is visually emphasized.
Structure
<section aria-labelledby="cal-title">
<header>
<h2 id="cal-title" aria-live="polite">April 2026</h2>
<div class="cal-controls">
<button aria-label="Previous month"><</button>
<button>Today</button>
<button aria-label="Next month">></button>
<div role="tablist" aria-label="View">
<button role="tab" aria-selected="true">Month</button>
<button role="tab" aria-selected="false">Week</button>
<button role="tab" aria-selected="false">Day</button>
</div>
</div>
</header>
<div role="grid" aria-labelledby="cal-title" aria-readonly="false">
<div role="row" class="weekdays">
<span role="columnheader">Mon</span>
<span role="columnheader">Tue</span>
<!-- ... Sun -->
</div>
<div role="row">
<div role="gridcell" aria-selected="false" tabindex="-1" data-date="2026-03-30">
<span class="num muted">30</span>
</div>
<div role="gridcell" aria-selected="true" tabindex="0" data-date="2026-04-27">
<span class="num">27</span>
<ul role="list" class="events">
<li><a href="/e/42" class="chip">10:00 Standup</a></li>
<li><a href="/e/43" class="chip">14:00 1:1 with Alex</a></li>
<li><button aria-label="3 more events">+3 more</button></li>
</ul>
</div>
</div>
</div>
</section>
Uses
- @community/method-heuristic-review
Behavior
- Arrow Left/Right move the focused day by one; Up/Down by one week; PageUp/PageDown by one month.
- Home goes to first day of week; End to last day; Cmd/Ctrl+Home goes to today.
- Click a day to select; double-click or Enter on focused day opens the new-event composer.
- Multi-day events render as bars spanning multiple cells with rounded ends only at start/end.
- Past dates render with reduced opacity; today gets an accent ring.
- Cell overflow: when more than 3-4 events fit, show '+N more' opening a popover with the full list.
A11y
- Use ARIA grid pattern: container
role='grid', rowsrole='row', cellsrole='gridcell'. - Roving tabindex: only the focused day has
tabindex='0'; all otherstabindex='-1'. - Update
aria-live='polite'on the month title when navigating to a new month. - Each day cell needs an accessible name including the full date: 'April 27, 2026, Monday'.
- Event chips must be reachable as links or buttons (not div+onclick).
Loaded when retrieval picks the atom as a focal / direct hit.
CalendarGrid [pattern] v1.0.0
A 7-column x 5-6 row grid showing a calendar month, with each day cell hosting event chips. Supports keyboard navigation between days, multi-day event spans, and view-switching between Month / Week / Day.
Facts
Label
Calendar Month Grid
Problem
Time-based work (meetings, content schedules, deadlines) needs a spatial view that aligns with users' mental model of weeks and months — not a flat list.
Solution
Render the month as a 7-column grid, with weekday headers on top and day cells below. Each day cell shows the date number plus stacked event chips truncated with '+ N more'. Active day is visually emphasized.
Structure
<section aria-labelledby="cal-title">
<header>
<h2 id="cal-title" aria-live="polite">April 2026</h2>
<div class="cal-controls">
<button aria-label="Previous month"><</button>
<button>Today</button>
<button aria-label="Next month">></button>
<div role="tablist" aria-label="View">
<button role="tab" aria-selected="true">Month</button>
<button role="tab" aria-selected="false">Week</button>
<button role="tab" aria-selected="false">Day</button>
</div>
</div>
</header>
<div role="grid" aria-labelledby="cal-title" aria-readonly="false">
<div role="row" class="weekdays">
<span role="columnheader">Mon</span>
<span role="columnheader">Tue</span>
<!-- ... Sun -->
</div>
<div role="row">
<div role="gridcell" aria-selected="false" tabindex="-1" data-date="2026-03-30">
<span class="num muted">30</span>
</div>
<div role="gridcell" aria-selected="true" tabindex="0" data-date="2026-04-27">
<span class="num">27</span>
<ul role="list" class="events">
<li><a href="/e/42" class="chip">10:00 Standup</a></li>
<li><a href="/e/43" class="chip">14:00 1:1 with Alex</a></li>
<li><button aria-label="3 more events">+3 more</button></li>
</ul>
</div>
</div>
</div>
</section>
Uses
- @community/method-heuristic-review
Behavior
- Arrow Left/Right move the focused day by one; Up/Down by one week; PageUp/PageDown by one month.
- Home goes to first day of week; End to last day; Cmd/Ctrl+Home goes to today.
- Click a day to select; double-click or Enter on focused day opens the new-event composer.
- Multi-day events render as bars spanning multiple cells with rounded ends only at start/end.
- Past dates render with reduced opacity; today gets an accent ring.
- Cell overflow: when more than 3-4 events fit, show '+N more' opening a popover with the full list.
A11y
- Use ARIA grid pattern: container
role='grid', rowsrole='row', cellsrole='gridcell'. - Roving tabindex: only the focused day has
tabindex='0'; all otherstabindex='-1'. - Update
aria-live='polite'on the month title when navigating to a new month. - Each day cell needs an accessible name including the full date: 'April 27, 2026, Monday'.
- Event chips must be reachable as links or buttons (not div+onclick).
Examples
- @community/example-google-calendar-month
- @community/example-fantastical-month
Label
Calendar Month Grid
Problem
Time-based work (meetings, content schedules, deadlines) needs a spatial view that aligns with users' mental model of weeks and months — not a flat list.
Solution
Render the month as a 7-column grid, with weekday headers on top and day cells below. Each day cell shows the date number plus stacked event chips truncated with '+ N more'. Active day is visually emphasized.
Structure
<section aria-labelledby="cal-title">
<header>
<h2 id="cal-title" aria-live="polite">April 2026</h2>
<div class="cal-controls">
<button aria-label="Previous month"><</button>
<button>Today</button>
<button aria-label="Next month">></button>
<div role="tablist" aria-label="View">
<button role="tab" aria-selected="true">Month</button>
<button role="tab" aria-selected="false">Week</button>
<button role="tab" aria-selected="false">Day</button>
</div>
</div>
</header>
<div role="grid" aria-labelledby="cal-title" aria-readonly="false">
<div role="row" class="weekdays">
<span role="columnheader">Mon</span>
<span role="columnheader">Tue</span>
<!-- ... Sun -->
</div>
<div role="row">
<div role="gridcell" aria-selected="false" tabindex="-1" data-date="2026-03-30">
<span class="num muted">30</span>
</div>
<div role="gridcell" aria-selected="true" tabindex="0" data-date="2026-04-27">
<span class="num">27</span>
<ul role="list" class="events">
<li><a href="/e/42" class="chip">10:00 Standup</a></li>
<li><a href="/e/43" class="chip">14:00 1:1 with Alex</a></li>
<li><button aria-label="3 more events">+3 more</button></li>
</ul>
</div>
</div>
</div>
</section>
Uses
- @community/method-heuristic-review
Behavior
- Arrow Left/Right move the focused day by one; Up/Down by one week; PageUp/PageDown by one month.
- Home goes to first day of week; End to last day; Cmd/Ctrl+Home goes to today.
- Click a day to select; double-click or Enter on focused day opens the new-event composer.
- Multi-day events render as bars spanning multiple cells with rounded ends only at start/end.
- Past dates render with reduced opacity; today gets an accent ring.
- Cell overflow: when more than 3-4 events fit, show '+N more' opening a popover with the full list.
A11y
- Use ARIA grid pattern: container
role='grid', rowsrole='row', cellsrole='gridcell'. - Roving tabindex: only the focused day has
tabindex='0'; all otherstabindex='-1'. - Update
aria-live='polite'on the month title when navigating to a new month. - Each day cell needs an accessible name including the full date: 'April 27, 2026, Monday'.
- Event chips must be reachable as links or buttons (not div+onclick).
Compatible
- @community/pattern-date-range-picker
Source
prime-system/examples/frontend-design/primes/compiled/@community/pattern-calendar-grid/atom.yaml