Month calendar

MonthCalendar renders an interactive month grid as an accessible table with previous and next month controls, localized weekday names, and selectable date entries.

Example

<MonthCalendar
  value={[
    {
      content: '🎉 Today',
      date: new Date('2026-11-01T17:07:13.566Z')
    },
    {
      content: '📅 Planning',
      date: new Date('2026-11-02T17:07:13.566Z')
    }
  ]}
 />

Usage

value lists DateData entries whose content appears in the matching cell; entries sharing a date are grouped in a popover. onSelect receives the clicked entry and onChange fires when the visible month changes.

<MonthCalendar
  locale="zh-CN"
  theme="success"
  value={events}
  onSelect={({ date, content, link }) => open(link)}
  onChange={date => loadMonth(date)}
/>

locale controls weekday formatting and defaults to the browser language; theme styles the header and controls.