MonthView

MonthView is part of the Calendar set, imported from @jcsoftdev/ui/calendar.

Import

import { MonthView } from "@jcsoftdev/ui/calendar";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/calendar/month-view.

Usage

<MonthView
  month="2026-10-08"
  today="2026-10-08"
  events={events}
  markers={markers}
  shadedDates={["2026-10-04", "2026-10-11", "2026-10-18", "2026-10-25"]}
  locale="es-PE"
  weekStartsOn={1}
/>

Props

Prop	Type	Default	Description
month *	string		Any “YYYY-MM-DD” date inside the month to show.
today *	string		“YYYY-MM-DD” date highlighted as today; the view never computes it.
events *	CalendarEvent[]
markers	CalendarMarker[]	[]
shadedDates	string[]	[]	Dates (“YYYY-MM-DD”) rendered with a hatch pattern (non-working days).
locale	string		BCP 47 locale for weekday labels. Defaults to the runtime locale.
weekStartsOn	0 | 1 | 4 | 3 | 2 | 5 | 6	1	First day of the week, 0 (Sunday) to 6 (Saturday). Defaults to 1 (Monday).
formatMore *	(count: number) => string		Label for the overflow button, e.g. (n) => \+${n} more``.
onOpenEvent	((id: string) => void)
onOpenMarker	((id: string) => void)
onSelectDate	((date: string) => void)		Called with the day’s date when the overflow button is clicked.
className	string

* marks a required prop.

Storybook stories

• Default
• Sunday Start
• Empty
• Next Month
• Narrow

Source

packages/ui/src/calendar/month-view/month-view.tsx