Components
Loading preview...
The SidePanelMultiCalendar is a unique, planner-style calendar component that makes managing multiple date selections more organized and intuitive. Built with shadcn/ui, it combines a traditional calendar on the left with a dynamic side panel on the right that groups selected dates by month. Users can easily review their selections, remove individual dates, or clear all dates within a specific month for quick adjustments. The scrollable panel ensures that large sets of dates remain manageable, while the built-in confirmation action supports real-world workflows like booking, availability planning, or event scheduling. With its clear two-panel layout and interactive controls, SidePanelMultiCalendar transforms multi-date selection into a structured, user-friendly experience.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/side-panel-multi-calendar"use client";
import { SidePanelMultiCalendar } from "@/components/ui/side-panel-multi-calendar";
export default function SidePanelMultiCalendarDemoPage() {
return (
<div className="flex min-h-screen flex-col items-center justify-center">
<SidePanelMultiCalendar />
</div>
);
}