WeekView

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

Import

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

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

Usage

<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
• Sunday Start
• Empty
• No Now Line
• Busy Day
• Narrow

Source

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