Schedule Date

A dialog with a calendar for selecting a date range, showing days of the week and allowing date selection. It highlights selected dates and shows a month view. Use it when a user needs to pick a specific date or date range.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/schedule-date

npx layro-cli add @watermeloncorp/schedule-date

npx layro-cli add @watermeloncorp/schedule-date

bunx layro-cli add @watermeloncorp/schedule-date

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

'use client';

import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { ChevronLeft, ChevronRight, Check, ChevronDown } from 'lucide-react';
import { cn } from '@/lib/utils';

interface DateRange {
  start: Date | null;
  end: Date | null;
}

interface ScheduleDateProps {
  onApply?: (range: DateRange) => void;