# Event Path Calendar

> The Event Path Calendar is a visually engaging timeline-based calendar that represents events along a horizontal path, mimicking a journey or roadmap. Instead of traditional grid layouts, each event is plotted sequentially, allowing users to easily track the flow of activities over time. Users can add events with a title and date, and view details in popovers that include options to delete events. The component supports filters such as “Last Week,” “Last Month,” “Last 3 Months,” and “Last 6 Months,” enabling quick focus on specific time ranges. It features a horizontally scrollable interface for managing large numbers of events, and is fully styled for both light and dark themes using black-and-white visuals. This design is especially suitable for conferences, festivals, project timelines, or any scenario where events need to be presented as part of a sequential journey rather than a conventional calendar grid.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@ruixen.ui/components/event-path-calendar

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/event-path-calendar?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt