Dashboard — Calendar beside daily agenda

A compact month calendar anchors a larger chronological day agenda. Use when upcoming events are the primary dashboard task.

ReactHTML

1440 × 900

Open in new tab

Component.tsx315 lines

export default function DashboardScheduleAgenda() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <header className="flex flex-wrap items-end justify-between gap-6">
          <div>
            <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
              Schedule overview
            </h1>
            <p className="mt-4 max-w-2xl text-lg text-pretty text-neutral-600">
              Review the selected day and its upcoming events.
            </p>
          </div>
          <a
            href="#"
            className="inline-flex h-11 items-center justify-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
          >
            Add event
          </a>
        </header>
        <div className="mt-10 grid items-start gap-10 lg:grid-cols-[18rem_minmax(0,1fr)]">
          <aside className="rounded-lg border border-neutral-200 p-6">
            <h2 className="text-base font-semibold">October 2026</h2>
            <p className="mt-2 text-sm text-neutral-500">Selected: Sunday 11</p>
            <div className="mt-6 grid grid-cols-7 gap-1 text-center text-xs text-neutral-500">
              <span>M</span>
              <span>T</span>
              <span>W</span>
              <span>T</span>
              <span>F</span>
              <span>S</span>
              <span>S</span>
            </div>
            <div
              aria-label="October dates"
              className="mt-2 grid grid-cols-7 gap-1"
            >
              <span aria-hidden="true" className="h-8"></span>
              <span aria-hidden="true" className="h-8"></span>
              <span aria-hidden="true" className="h-8"></span>
              <time
                dateTime="2026-10-01"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                1
              </time>
              <time
                dateTime="2026-10-02"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                2
              </time>
              <time
                dateTime="2026-10-03"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                3
              </time>
              <time
                dateTime="2026-10-04"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                4
              </time>
              <time
                dateTime="2026-10-05"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                5
              </time>
              <time
                dateTime="2026-10-06"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                6
              </time>
              <time
                dateTime="2026-10-07"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                7
              </time>
              <time
                dateTime="2026-10-08"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                8
              </time>
              <time
                dateTime="2026-10-09"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                9
              </time>
              <time
                dateTime="2026-10-10"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                10
              </time>
              <time
                dateTime="2026-10-11"
                className="flex h-8 items-center justify-center rounded-md text-xs border border-neutral-900 bg-neutral-900 font-semibold text-white"
              >
                11
              </time>
              <time
                dateTime="2026-10-12"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                12
              </time>
              <time
                dateTime="2026-10-13"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                13
              </time>
              <time
                dateTime="2026-10-14"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                14
              </time>
              <time
                dateTime="2026-10-15"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                15
              </time>
              <time
                dateTime="2026-10-16"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                16
              </time>
              <time
                dateTime="2026-10-17"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                17
              </time>
              <time
                dateTime="2026-10-18"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                18
              </time>
              <time
                dateTime="2026-10-19"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                19
              </time>
              <time
                dateTime="2026-10-20"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                20
              </time>
              <time
                dateTime="2026-10-21"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                21
              </time>
              <time
                dateTime="2026-10-22"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                22
              </time>
              <time
                dateTime="2026-10-23"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                23
              </time>
              <time
                dateTime="2026-10-24"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                24
              </time>
              <time
                dateTime="2026-10-25"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                25
              </time>
              <time
                dateTime="2026-10-26"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                26
              </time>
              <time
                dateTime="2026-10-27"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                27
              </time>
              <time
                dateTime="2026-10-28"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                28
              </time>
              <time
                dateTime="2026-10-29"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                29
              </time>
              <time
                dateTime="2026-10-30"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                30
              </time>
              <time
                dateTime="2026-10-31"
                className="flex h-8 items-center justify-center rounded-md text-xs text-neutral-600"
              >
                31
              </time>
            </div>
            <p className="mt-6 text-sm">
              <a
                href="#"
                className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
              >
                Open calendar
              </a>
            </p>
          </aside>
          <section>
            <h2 className="text-lg font-semibold">Sunday, 11 October</h2>
            <ul role="list" className="mt-4">
              <li className="grid gap-3 border-t border-neutral-200 py-6 sm:grid-cols-[5rem_minmax(0,1fr)]">
                <time
                  dateTime="2026-10-11T09:00:00"
                  className="text-sm font-mono text-neutral-500"
                >
                  09:00
                </time>
                <div>
                  <h3 className="text-base font-semibold">Event title</h3>
                  <p className="mt-2 text-sm text-neutral-600">
                    Short agenda and participant summary.
                  </p>
                  <p className="mt-4 text-sm">
                    <a
                      href="#"
                      aria-label="View 09:00 event"
                      className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                    >
                      View event
                    </a>
                  </p>
                </div>
              </li>
              <li className="grid gap-3 border-t border-neutral-200 py-6 sm:grid-cols-[5rem_minmax(0,1fr)]">
                <time
                  dateTime="2026-10-11T11:30:00"
                  className="text-sm font-mono text-neutral-500"
                >
                  11:30
                </time>
                <div>
                  <h3 className="text-base font-semibold">Session title</h3>
                  <p className="mt-2 text-sm text-neutral-600">
                    Short purpose and location summary.
                  </p>
                  <p className="mt-4 text-sm">
                    <a
                      href="#"
                      aria-label="View 11:30 event"
                      className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                    >
                      View event
                    </a>
                  </p>
                </div>
              </li>
              <li className="grid gap-3 border-t border-neutral-200 py-6 sm:grid-cols-[5rem_minmax(0,1fr)]">
                <time
                  dateTime="2026-10-11T14:00:00"
                  className="text-sm font-mono text-neutral-500"
                >
                  14:00
                </time>
                <div>
                  <h3 className="text-base font-semibold">Review title</h3>
                  <p className="mt-2 text-sm text-neutral-600">
                    Short review and owner summary.
                  </p>
                  <p className="mt-4 text-sm">
                    <a
                      href="#"
                      aria-label="View 14:00 event"
                      className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                    >
                      View event
                    </a>
                  </p>
                </div>
              </li>
            </ul>
          </section>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when a dashboard centers on a day schedule. Choose dashboard-activity-feed for unordered recent events. Variations: add a week label, show appointment duration, or replace the calendar with a date range.
Hierarchy: The h1 leads to selected date and time-ordered event titles. Calendar selection is written in a visible note and outlined in its day cell. Event titles allow 5 words, summaries 10 and the h1 5.
Responsive: Below 1024px the calendar sits above the agenda without a fixed rail width. Event times stack over their descriptions below 640px. Day cells remain seven equal columns at 320px.
Layout: White section with a 1152px max-w-6xl container, 24px side gutters and 64px vertical padding, increasing to 96px at 640px. An 18rem calendar rail and flexible agenda form a lg grid with 40px gaps. The calendar uses p-6, seven equal day columns and 32px-high cells. Agenda rows are 80px/1fr from sm with 12px gaps and 24px vertical padding.
States: The selected day is a static illustration with visible selection text. Event actions and calendar navigation have 2px keyboard-focus outlines. Date selection, calendar navigation and event creation require host application integration.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│Schedule overview                              [Add event]    │
│October 2026              Sunday, 11 October                  │
│M T W T F S S             09:00  Event title                  │
│      1 2 3 4                    Agenda summary [View event]  │
│5 6 7 8 9 10 [11]         11:30  Session title                │
│12 13 14 15 16 17 18             Session summary              │
│19 20 21 22 23 24 25      14:00  Review title                 │
│26 27 28 29 30 31                Review summary               │
│[Open calendar]                                               │
└──────────────────────────────────────────────────────────────┘

View all

Dashboard — Activity feed
Layout tags: stacked,list,compact
Dashboard — App shell with sidebar
Layout tags: sidebar,grid,numbers
Dashboard — Bento overview
Layout tags: bento,numbers,media

Dashboard — Calendar beside daily agenda

Pattern notes

More in Dashboard

Dashboard — Activity feed

Dashboard — App shell with sidebar

Dashboard — Bento overview