14 — Components

Calendar — Day View

Day-by-day match schedule with a mini month picker, competition badges, live scores, and empty state. Three composable primitives assembled into one drop-in view.

1 — CalendarDayView — Live Component

Fully interactive — click any day in the sidebar to see its matches. Navigate between days with the arrow buttons. Switch match days to see different states: results (Mar 1), live (Mar 8), upcoming, and empty.

MARCH 2026
M
T
W
T
F
S
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
THIS DAY
Premiership
3
CPSL Cup
0
Total matches3
SUNDAY
1 MARCH 2026
12:00
KICK-OFF
CENTRAL
Matchday 22
FULL TIME
CHARLOTTE FC
Home · 1st Place
3—1
DURHAM UNITED
Away · 3rd Place
Matthews Sportsplex, Charlotte NC
14:00
KICK-OFF
NORTHEAST
Matchday 22
FULL TIME
RALEIGH ATHLETIC
Home · 2nd Place
2—2
TRIANGLE FC
Away · 4th Place
Dix Park Fields, Raleigh NC
16:00
KICK-OFF
MIDWEST
Matchday 22
FULL TIME
WINSTON-SALEM SC
Home · 6th Place
1—2
GREENSBORO FC
Away · 5th Place
Truist Stadium, Winston-Salem NC
tsx
import { CalendarDayView } from "@/components/cpsl/calendar"
import type { MatchDay } from "@/components/cpsl/calendar"

// March 2026: startWeekday=0 (1st = Sunday)
<CalendarDayView
  monthLabel="MARCH 2026"
  daysInMonth={31}
  startWeekday={0}
  defaultDay={1}
  todayDay={1}
  matchDays={matchDays}
  matches={matches}
  onSwitchToMonth={() => router.push("/calendar/month")}
/>

2 — CalendarMatchCard — All States

Four status variants. Passes competition to colour-code the badge — blue for Premiership, gold for CPSL Cup.

Upcoming
14:00
KICK-OFF
CENTRAL
Matchday 23
UPCOMING
CHARLOTTE FC
Home · 1st Place
VS
DURHAM UNITED
Away · 3rd Place
Matthews Sportsplex, Charlotte NC
Live
16:00
KICK-OFF
NORTHEAST
Matchday 23
LIVE · 34'
TRIANGLE FC
Home · 4th Place
1—0
WINSTON-SALEM SC
Away · 6th Place
WakeMed Soccer Park, Cary NC
Full Time
12:00
KICK-OFF
CENTRAL
Matchday 22
FULL TIME
CHARLOTTE FC
Home · 1st Place
3—1
DURHAM UNITED
Away · 3rd Place
Matthews Sportsplex, Charlotte NC
CPSL Cup — Upcoming
15:00
KICK-OFF
CPSL CUP
UPCOMING
CHARLOTTE FC
Home · 1st Place
VS
RALEIGH ATHLETIC
Away · 2nd Place
Matthews Sportsplex, Charlotte NC
Postponed
13:00
PPD
MIDWEST
Matchday 22
POSTPONED
GREENSBORO FC
Home · 5th Place
VS
TRIANGLE FC
Away · 4th Place
Bryan Park, Greensboro NC
tsx
import { CalendarMatchCard } from "@/components/cpsl/calendar"

// Upcoming
<CalendarMatchCard
  kickoff="14:00"
  status="upcoming"
  competition="premiership"
  matchday={23}
  home={{ name: "Charlotte FC", position: 1 }}
  away={{ name: "Durham United", position: 3 }}
  venue="Matthews Sportsplex, Charlotte NC"
/>

// Live with score
<CalendarMatchCard
  kickoff="16:00"
  status="live"
  minute={34}
  competition="premiership"
  home={{ name: "Triangle FC", position: 4, score: 1 }}
  away={{ name: "Winston-Salem SC", position: 6, score: 0 }}
  venue="WakeMed Soccer Park, Cary NC"
/>

3 — Primitives

Use DayPicker and CalendarViewToggle independently in your own layouts.

DayPicker
MARCH 2026
M
T
W
T
F
S
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
THIS DAY
Premiership
3
CPSL Cup
0
Total matches3
CalendarViewToggle
Month active
Day active

4 — Component API

CalendarDayView
<CalendarDayView
  monthLabel="MARCH 2026"
  daysInMonth={31}
  startWeekday={0}   // 0=Sun, 1=Mon
  defaultDay={1}
  todayDay={3}
  matchDays={[
    { day: 1, dots: ["premiership", "cup"] },
  ]}
  matches={[
    { day: 1, kickoff: "14:00",
      status: "upcoming",
      competition: "premiership",
      matchday: 22,
      home: { name: "Charlotte FC", position: 1 },
      away: { name: "Durham United", position: 3 },
      venue: "Matthews Sportsplex" },
  ]}
  onSwitchToMonth={() => {}}
/>
CalendarMatchCard
<CalendarMatchCard
  kickoff="14:00"
  status="upcoming"     // upcoming|live|fulltime|postponed
  competition="premiership"  // or "cup"
  matchday={22}
  minute={34}           // for live status
  home={{ name: "Charlotte FC", position: 1, score: 2 }}
  away={{ name: "Durham United", position: 3, score: 1 }}
  venue="Matthews Sportsplex, Charlotte NC"
  onClick={() => router.push("/matches/123")}
/>
DayPicker
<DayPicker
  monthLabel="MARCH 2026"
  daysInMonth={31}
  startWeekday={0}      // weekday of the 1st (0=Sun)
  selectedDay={1}
  todayDay={3}
  matchDays={[
    { day: 1, dots: ["premiership", "premiership"] },
    { day: 7, dots: ["cup"] },
  ]}
  summary={{ premiership: 3, cup: 0 }}
  onDaySelect={(day) => setDay(day)}
  onPrevMonth={() => {}}
  onNextMonth={() => {}}
/>
CalendarViewToggle
<CalendarViewToggle
  value="day"           // "month" | "day"
  onChange={(v) => setView(v)}
/>