月間カレンダーEventCalendarExperimental

Month calendar with events: a 週×曜日 day-cell grid for a month with events placed as chips on their date (capped per day with a '＋N' overflow), today marked, out-of-month days de-emphasised, role=grid semantics (weekday columnheaders, day gridcells with a composed accessible name) and roving-tabindex keyboard nav (arrows ±1 day / ±1 week, Home/End, Enter to select). Owns the month math (pass month + events); today is injectable (SSR-safe). For editorial / content calendars, schedules, bookings and any events-on-dates view.

プレビュー

2026年6月

日
月
火
水
木
金
土
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
＋1件
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11

日付/予定をクリック・矢印キーで移動（±1日 / ±1週）・Enterで選択。15日は4件で「＋1件」。

Props

表は横にスクロールできます
プロパティ型初期値説明
monthstring | Date-Any date within the month to show ("YYYY-MM" / "YYYY-MM-DD" / Date). The component computes the 6-week grid.
eventsCalendarEvent[]-{ id, date, label, tone?, ariaLabel? }. Placed as chips on their date; multiple per day stack with a ＋N overflow.
todaystring | Date-The date marked as today. Injectable (pass it in) so render stays SSR-safe — no internal new Date().
weekStartsOn0 | 100 = Sunday, 1 = Monday.
maxPerDaynumber3Max event chips per day before a ＋N affordance.
weekdayLabelsstring[]日 月 火 …7 short weekday labels starting Sunday.
renderEvent(event) => ReactNode-Render an event chip (default: a tone pill).
onSelectDate(iso: string) => void-Day clicked / Enter on the focused day.
onSelectEvent(event) => void-An event chip clicked.
onMonthChange(month: Date) => void-When provided, renders a header with the month title + prev/next buttons.
labelReactNode-Accessible name for the grid.

Usage

import * as React from "react"
import { EventCalendar, type CalendarEvent } from "@gunjo/ui"

const events: CalendarEvent[] = [
  { id: "a1", date: "2026-06-03", label: "特集: 夏の旅", tone: "info" },
  { id: "a4", date: "2026-06-15", label: "入稿締切: 連載#12", tone: "destructive" },
  { id: "a8", date: "2026-06-24", label: "公開: 群青UI 解説", tone: "primary" },
]

function Calendar() {
  const [month, setMonth] = React.useState(new Date(2026, 5, 1))
  return (
    <EventCalendar
      month={month}
      events={events}
      today="2026-06-24"            // injectable — SSR-safe
      onMonthChange={setMonth}      // renders prev/next header
      onSelectDate={(iso) => openDay(iso)}
      onSelectEvent={(e) => openEvent(e)}
    />
  )
}

使用コンポーネント

ButtonBadgeScheduleGrid