Dialog with Calendar and Time Picker

​

Installation

npx shadcn@latest add @blocks/dialog-10

​

Dependencies

• button - shadcn/ui button component
• calendar - shadcn/ui calendar component
• dialog - shadcn/ui dialog component
• input - shadcn/ui input component
• label - shadcn/ui label component
• popover - shadcn/ui popover component
• select - shadcn/ui select component
• textarea - shadcn/ui textarea component
• date-fns - Date formatting library
• lucide-react - Icon library (CalendarIcon)

​

Usage

import Dialog10 from "@/components/dialog-10";

export default function Page() {
  return <Dialog10 />;
}

​

Features

• Calendar picker - Full calendar component in popover for date selection
• Time picker - Select dropdown with 30-minute intervals
• Multiple inputs - Title, attendees, location, and description fields
• Date formatting - Uses date-fns for consistent date display
• Responsive grid - Date and time arranged in responsive grid layout
• Form sections - Well-organized sections with labels and helper text
• Textarea - Multi-line description input
• Bordered header - Separated header section
• Large dialog - Uses sm:max-w-lg for comfortable form layout
• Memoized time options - Efficient time slot generation with useMemo

​

Component Structure

• Dialog with controlled state
• DialogTrigger button
• DialogContent with:
  • Custom padding (p-0)
  • Large width (sm:max-w-lg)
  • No gap (gap-0)
• Bordered DialogHeader
• Form with multiple sections:
  • Meeting title input
  • Attendees input with helper text
  • Grid layout (3 columns) for:
    • Date picker (2 columns) with Popover and Calendar
    • Time picker (1 column) with Select
  • Location/conference link input
  • Description textarea
• Bordered footer with:
  • Cancel button (ghost variant)
  • Schedule button
• State management for:
  • Dialog visibility
  • Selected date
  • Selected time
• useMemo hook for generating time options
• date-fns format function for date display