Delivery Scheduler

Forms 239

About

Delivery Scheduler This component encapsulates the entire scheduling logic, allowing users to select a date and a time slot. It is highly reusable and can be integrated into any form that requires date and time input. The selection indicator is animated using framer-motion to provide a smooth, fluid user experience.

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

Code

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

Usage.tsx

// Import the component and necessary hooks/utils
import { DeliveryScheduler } from '@/components/ui/delivery-scheduler';
import React from 'react';

// Main Demo Component
const DeliverySchedulerDemo = () => {
  // Define the available time slots. This would typically come from an API.
  const availableTimes = [
    '4:30 AM', '5:00 AM', '5:30 AM',
    '6:00 AM', '6:30 AM', '7:00 AM'
  ];

  // Define the handler function for when a schedule is confirmed.
  const handleSchedule = (dateTime: { date: Date; time: string }) => {
    // In a real application, you would handle this data, e.g., send it to a server.
    alert(
      `Scheduled!\n\nDate: ${dateTime.date.toLocaleDateString()}\nTime: ${dateTime.time}`
    );
  };
  
  return (
    // Center the component on the page for a nice preview
    <div className="flex min-h-[500px] w-full items-center justify-center bg-background p-4">
      <DeliveryScheduler 
        timeSlots={availableTimes}
        timeZone="Lisbon (GMT +1)"
        onSchedule={handleSchedule}
        initialDate={new Date('2025-05-05')} // Example of setting a specific start date
      />
    </div>
  );
};

export default DeliverySchedulerDemo;