Field Schedule

Map games across times and fields with live and final states.

Saturday pool play
Time	Field 1	Field 2	Field 3
8:30 AM	Bombers6 Ringers2 Final	Scuff City3 Rip City4 Live	Big Sticks Fully Loaded Scheduled
9:45 AM	Bat Attitudes Pitch Please Scheduled	Mercy Rule Dad Bod Dynasty Delayed	Open

A tournament-wide view for the moment when someone asks what is happening on Field 3. Times become rows, fields become columns, and each game carries its teams, score, and operating state.

Install#

npx shadcn@latest add https://benhof.ai/r/field-schedule.json

Usage#

import { FieldSchedule } from "@/components/field-schedule"

;<FieldSchedule
  title="Saturday pool play"
  fields={["Field 1", "Field 2"]}
  games={[
    {
      id: "game-1",
      time: "8:30 AM",
      field: "Field 1",
      away: "Bombers",
      home: "Ringers",
      status: "live",
      awayScore: 3,
      homeScore: 2,
    },
  ]}
/>

Props#

Prop	Type	Default	Description
`games`	`FieldScheduleGame[]`	-	Games with a preformatted time, field, teams, scores, and status.
`fields`	`string[]`	derived	Controls field order and keeps empty fields visible.
`title`	`string`	`"Field schedule"`	Accessible table caption.

Use preformatted time strings so the display stays in the event's local timezone. The table scrolls horizontally on smaller screens.