Components
Loading preview...
The Event Calendar component is a fully interactive calendar built with Shadcn UI components, allowing users to manage events efficiently. Users can select a date on the calendar to view all events scheduled for that day. Events are displayed as cards under the selected date, with the ability to add new events via an input field and button. Each event card includes a Lucide Trash2 icon, enabling users to remove events seamlessly. The component supports multiple events per date, is fully responsive, and works in both light and dark themes. It provides a clean, user-friendly interface for daily scheduling, planning, or tracking important tasks directly within a Shadcn UI-styled calendar.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/event-calendar"use client"
import * as React from "react"
import { EventCalendar, CalendarEvent } from "@/components/ui/event-calendar"
export default function DemoEventCalendar() {
const [events, setEvents] = React.useState<CalendarEvent[]>([
{ id: "1", title: "Kickoff Meeting", date: new Date().toISOString() },
{ id: "2", title: "Design Review", date: new Date().toISOString() },
])
const handleAddEvent = (event: CalendarEvent) => {
setEvents((prev) => [...prev, event])
}
const handleRemoveEvent = (id: string) => {
setEvents((prev) => prev.filter((e) => e.id !== id))
}
return (
<div className="p-6 space-y-6">
<h1 className="text-2xl font-bold">Event Calendar Demo</h1>
<EventCalendar
events={events}
onAddEvent={handleAddEvent}
onRemoveEvent={handleRemoveEvent}
/>
</div>
)
}