週間カレンダーWeekViewExperimental
Week-view time-grid calendar: day columns × an hour axis with events positioned by start/end time and overlap-packed into side-by-side columns, plus a time gutter, weekday/date headers and an optional today highlight. Owns the week math (pass weekOf + events); today is injectable (SSR-safe). Events are focusable buttons with a composed accessible name. For appointments, bookings, shift schedules, week schedulers and any time-of-day calendar.
プレビュー
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| weekOf | string | Date | - | Any date within the week to show. The component computes the day columns. |
| events | WeekEvent[] | - | { id, start, end, label, tone?, ariaLabel? } — start/end are 'YYYY-MM-DDTHH:mm' or Date. Overlapping events are packed side-by-side. |
| today | string | Date | - | The date highlighted as today. Injectable so render stays SSR-safe (no internal new Date()). |
| dayCount | number | 7 | Day columns (7 = full week, 5 = Mon–Fri workweek). |
| weekStartsOn | 0 | 1 | 0 | 0 = Sunday, 1 = Monday. |
| startHour / endHour | number | 8 / 21 | Visible hour range. |
| hourHeight | number | 48 | Pixels per hour (row height). |
| weekdayLabels | string[] | 日 月 火 … | 7 short weekday labels starting Sunday. |
| onSelectEvent | (event) => void | - | An event clicked. |
| label | ReactNode | - | Accessible name for the calendar. |
Usage
import { WeekView, type WeekEvent } from "@gunjo/ui"
const events: WeekEvent[] = [
{ id: "e1", start: "2026-06-22T09:00", end: "2026-06-22T10:30", label: "編集会議", tone: "info" },
{ id: "e2", start: "2026-06-22T10:00", end: "2026-06-22T11:00", label: "1on1", tone: "primary" }, // overlaps → side-by-side
{ id: "e5", start: "2026-06-24T15:00", end: "2026-06-24T18:00", label: "撮影", tone: "info" },
]
<WeekView
weekOf="2026-06-24"
today="2026-06-24" // injectable — SSR-safe
events={events}
startHour={8}
endHour={19}
onSelectEvent={(e) => openEvent(e)}
/>