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">&lt;</button>
          <button>Today</button>
          <button aria-label="Next month">&gt;</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', rows role='row', cells role='gridcell'.
• Roving tabindex: only the focused day has tabindex='0'; all others tabindex='-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).

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">&lt;</button>
          <button>Today</button>
          <button aria-label="Next month">&gt;</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', rows role='row', cells role='gridcell'.
• Roving tabindex: only the focused day has tabindex='0'; all others tabindex='-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">&lt;</button>
          <button>Today</button>
          <button aria-label="Next month">&gt;</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', rows role='row', cells role='gridcell'.
• Roving tabindex: only the focused day has tabindex='0'; all others tabindex='-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