# TimelineView

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

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

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

## Import

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

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

## Usage

```tsx
<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

- [Default](/storybook/?path=/story/calendar-timelineview--default)
- [Empty Today](/storybook/?path=/story/calendar-timelineview--empty-today)
- [Hidden Dates](/storybook/?path=/story/calendar-timelineview--hidden-dates)
- [Markers Only](/storybook/?path=/story/calendar-timelineview--markers-only)
- [Narrow](/storybook/?path=/story/calendar-timelineview--narrow)

## Source

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