TimelineView

Live preview

Loading example…

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

Import

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

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

Usage

<TimelineView
  today="2026-10-08"
  events={events}
  markers={markers}
  hiddenDates={["2026-10-11"]}
  locale="es-PE"
  todayLabel="hoy"
  emptyLabel="Sin citas"
/>

Props

Prop	Type	Default	Description
`today` *	`string`		“YYYY-MM-DD” date highlighted as today; the view never computes it.
`events` *	`CalendarEvent[]`
`markers`	`CalendarMarker[]`	`[]`
`hiddenDates`	`string[]`	`[]`	Dates (“YYYY-MM-DD”) hidden from the timeline unless they are today.
`locale`	`string`		BCP 47 locale for date labels. Defaults to the runtime locale.
`todayLabel` *	`string`		Suffix marking today’s group, e.g. “today”.
`emptyLabel` *	`string`		Text shown for a day without events or markers.
`onOpenEvent`	`((id: string) => void)`
`onOpenMarker`	`((id: string) => void)`
`className`	`string`

* marks a required prop.

Storybook stories

Source

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