# WeekView

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

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

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

## Import

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

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

## Usage

```tsx
<WeekView
  week="2026-10-08"
  today="2026-10-08"
  currentTime="11:45"
  events={events}
  markers={markers}
  shadedDates={["2026-10-11"]}
  workingHours={[10, 19]}
  locale="es-PE"
  weekStartsOn={1}
  allDayLabel="Todo el día"
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `week` * | `string` |  | Any "YYYY-MM-DD" date inside the week to show. |
| `today` * | `string` |  | "YYYY-MM-DD" date highlighted as today; the view never computes it. |
| `currentTime` | `string` |  | Current time "HH:mm" for the "now" line; without it no line is drawn. |
| `events` * | `CalendarEvent[]` |  |  |
| `markers` | `CalendarMarker[]` | `[]` | Markers render in the all-day row. |
| `shadedDates` | `string[]` | `[]` | Dates ("YYYY-MM-DD") rendered with a hatch pattern (non-working days). |
| `workingHours` | `readonly [number, number]` |  | Highlighted band of working hours, [start, end) in hours. |
| `locale` | `string` |  |  |
| `weekStartsOn` | `0 \| 1 \| 4 \| 3 \| 2 \| 5 \| 6` | `1` | First day of the week, 0 (Sunday) to 6 (Saturday). Defaults to 1 (Monday). |
| `allDayLabel` * | `string` |  | Label of the all-day row. |
| `onOpenEvent` | `((id: string) => void)` |  |  |
| `onOpenMarker` | `((id: string) => void)` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/calendar-weekview--default)
- [Sunday Start](/storybook/?path=/story/calendar-weekview--sunday-start)
- [Empty](/storybook/?path=/story/calendar-weekview--empty)
- [No Now Line](/storybook/?path=/story/calendar-weekview--no-now-line)
- [Busy Day](/storybook/?path=/story/calendar-weekview--busy-day)
- [Narrow](/storybook/?path=/story/calendar-weekview--narrow)

## Source

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