Components
Loading preview...
Meeting Scheduler This component provides a comprehensive interface for scheduling events, featuring a responsive calendar for date range selection, time inputs, and additional options, all packaged in a clean, modern card layout.
@kavikatiyar
npx shadcn@latest add https://21st.dev/r/kavikatiyar/meeting-scheduler// demo.tsx
"use client";
import { MeetingScheduler } from "@/components/ui/meeting-scheduler";
import { parse } from "date-fns";
// Main Demo Component
export default function MeetingSchedulerDemo() {
// A simple handler to show the scheduled data in an alert.
const handleSchedule = (details: { startDate: Date | null; endDate: Date | null; aiNotes: boolean }) => {
const { startDate, endDate, aiNotes } = details;
const alertMessage = `
Meeting Scheduled!
--------------------
Start Date: ${startDate ? startDate.toDateString() : 'N/A'}
End Date: ${endDate ? endDate.toDateString() : 'N/A'}
AI Notes: ${aiNotes ? 'Enabled' : 'Disabled'}
`;
alert(alertMessage);
};
// A handler for the cancel action.
const handleCancel = () => {
alert("Scheduling cancelled.");
};
// Set initial dates based on the example image
const initialStartDate = parse("2025-07-14 09:00", "yyyy-MM-dd HH:mm", new Date());
const initialEndDate = parse("2025-07-20 10:00", "yyyy-MM-dd HH:mm", new Date());
return (
<div className="flex items-center justify-center min-h-screen bg-background p-4">
<MeetingScheduler
initialStartDate={initialStartDate}
initialEndDate={initialEndDate}
onSchedule={handleSchedule}
onCancel={handleCancel}
/>
</div>
);
}