Components
Loading preview...
The DropdownMultiCalendar is a powerful and user-friendly date selection component that enhances the traditional multi-date calendar with intuitive navigation controls. Built entirely with shadcn/ui, it features dropdown menus for quickly selecting a specific year and month, allowing users to jump instantly to any point in time without scrolling through the calendar. Once dates are chosen, they are displayed as interactive badges that can be individually removed for fine-grained control. The structured card layout, combined with a confirmation action, makes it ideal for applications like booking systems, event planners, and scheduling dashboards where efficient navigation and multi-date management are essential.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/dropdown-multi-calendar"use client";
import { DropdownMultiCalendar } from "@/components/ui/dropdown-multi-calendar";
export default function DropdownMultiCalendarDemoPage() {
return (
<div className="flex min-h-screen flex-col items-center justify-center">
<DropdownMultiCalendar />
</div>
);
}