# Dialog with Calendar and Time Picker

> A dialog with calendar and time picker block.

A shadcn/ui block from the [@blocks-so](https://blocks.so) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/blocks-so/dialog-10).

- Page, with a live preview: https://shadcn.exchange/r/blocks-so/dialog-10
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/blocks-so/dialog-10-light-f567874cb41208ba.png
- Registry item: https://blocks.so/r/dialog-10.json
- Categories: dialogs
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://blocks.so/r/dialog-10.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `date-fns`, `lucide-react`
- Registry items: `button`, `calendar`, `dialog`, `input`, `label`, `popover`, `select`, `textarea`

## Files

### `content/components/dialogs/dialog-10.tsx`

```tsx
'use client';

import { format } from 'date-fns';
import { CalendarIcon } from 'lucide-react';
import { useMemo, useState } from 'react';

import { Button } from '@/components/ui/button';
import { Calendar } from '@/components/ui/calendar';
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { cn } from '@/lib/utils';

export default function Dialog10() {
  const [date, setDate] = useState<Date | undefined>(new Date());
  const [startTime, setStartTime] = useState('09:00');

  const timeOptions = useMemo(() => {
    const options = [];
    for (let hour = 0; hour <= 23; hour++) {
      for (let minute = 0; minute < 60; minute += 30) {
        const formattedHour = hour.toString().padStart(2, '0');
        const formattedMinute = minute.toString().padStart(2, '0');
        const value = `${formattedHour}:${formattedMinute}`;
        const tempDate = new Date(2000, 0, 1, hour, minute);
        const label = format(tempDate, 'h:mm a');
        options.push({ value, label });
      }
    }

    if (!options.find((opt) => opt.value === '23:59')) {
      const endOfDay = new Date(2000, 0, 1, 23, 59);
      options.push({ value: '23:59', label: format(endOfDay, 'h:mm a') });
    }

    return options;
  }, []);
  return (
    <Dialog defaultOpen>
      <DialogTrigger render={<Button />}>Show dialog</DialogTrigger>
      <DialogContent className="gap-0 p-0 sm:max-w-lg">
        <DialogHeader className="border-b px-6 py-4 pt-5">
          <DialogTitle>Schedule a Meeting</DialogTitle>
        </DialogHeader>

        <form action="#" method="POST">
          <div className="space-y-6 p-6">
            <div className="space-y-2">
              <Label htmlFor="title">Meeting Title</Label>
              <Input
                id="title"
                name="title"
                placeholder="e.g., Project Kickoff"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="attendees">Attendees</Label>
              <Input
                id="attendees"
                name="attendees"
                placeholder="user1@example.com, user2@example.com"
              />
              <p className="text-pretty text-muted-foreground text-xs">
                Enter email addresses separated by commas.
              </p>
            </div>

            <div className="grid grid-cols-3 gap-4">
              <div className="col-span-2 space-y-2">
                <Label htmlFor="date">Date</Label>
                <Popover>
                  <PopoverTrigger
                    render={
                      <Button
                        className={cn(
                          'w-full justify-start text-left font-normal',
                          !date && 'text-muted-foreground'
                        )}
                        id="date"
                        variant={'outline'}
                      />
                    }
                  >
                    <CalendarIcon className="mr-1 h-4 w-4 shrink-0" />{' '}
                    {date ? format(date, 'PPP') : <span>Pick a date</span>}
                  </PopoverTrigger>
                  <PopoverContent align="start" className="w-auto p-0">
                    <Calendar
                      autoFocus
                      mode="single"
                      onSelect={setDate}
                      selected={date}
                    />
                  </PopoverContent>
                </Popover>
              </div>

              <div className="space-y-2">
                <Label htmlFor="time">Time</Label>
                <Select
                  items={timeOptions}
                  onValueChange={(value) => {
                    if (value) {
                      setStartTime(value);
                    }
                  }}
                  value={startTime}
                >
                  <SelectTrigger className="w-full" id="time">
                    <SelectValue placeholder="Select time" />
                  </SelectTrigger>
                  <SelectContent>
                    {timeOptions.map((option) => (
                      <SelectItem key={option.value} value={option.value}>
                        {option.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

            <div className="space-y-2">
              <Label htmlFor="location">Location / Conference Link</Label>
              <Input
                id="location"
                name="location"
                placeholder="e.g., Conference Room B or https://meet.example.com/..."
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="description">Description</Label>
              <Textarea
                className="min-h-[100px]"
                id="description"
                name="description"
                placeholder="Optional: Add an agenda or notes..."
              />
            </div>
          </div>

          <div className="flex items-center justify-end space-x-2 border-t p-4">
            <DialogClose render={<Button type="button" variant="ghost" />}>
              Cancel
            </DialogClose>
            <Button size="sm" type="submit">
              Schedule
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  );
}
```