Components
Loading preview...
The CalendarScheduler component is a streamlined scheduling interface that combines a calendar view with a scrollable list of interactive time slots in a single, card-based layout. Built entirely with shadcn/ui, it provides users with an intuitive way to select both date and time without relying on traditional input fields. The left panel offers a familiar calendar for date selection, while the right panel displays customizable, clickable time options, making scheduling faster and more user-friendly. With built-in Reset and Confirm actions, flexible configuration of available slots, and a clean responsive design, CalendarScheduler is ideal for appointment booking, meeting planners, and reservation systems where clarity and ease of use are essential.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/calendar-scheduler"use client";
import { CalendarScheduler } from "@/components/ui/calendar-scheduler";
export default function SchedulerDemoPage() {
return (
<div className="flex min-h-screen flex-col items-center justify-center p-8">
<CalendarScheduler
onConfirm={(val) => {
console.log("Scheduled:", val);
}}
/>
</div>
);
}