# MonthView

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

Source: https://ui.jcsoftdev.com/docs/components/month-view

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

## Import

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

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

## Usage

```tsx
<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](/storybook/?path=/story/calendar-monthview--default)
- [Sunday Start](/storybook/?path=/story/calendar-monthview--sunday-start)
- [Empty](/storybook/?path=/story/calendar-monthview--empty)
- [Next Month](/storybook/?path=/story/calendar-monthview--next-month)
- [Narrow](/storybook/?path=/story/calendar-monthview--narrow)

## Source

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