Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/event-path-calendar"use client"
import * as React from "react"
import { EventPathCalendar } from "@/components/ui/event-path-calendar"
export default function EventPathCalendarDemo() {
return (
<div className="p-4">
<h1 className="text-2xl font-semibold mb-4">Event Path Calendar Demo</h1>
<EventPathCalendar />
</div>
)
}