Meeting Scheduler

Cards 249

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Meeting Scheduler to your project and fits it to your theme.

Code

How Meeting Scheduler is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// 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>
  );
}