Calendar Dialog 1 - Calendar with Range in Dialog

Pro

Calendar in a dialog with date range selection.
Shadcn Calendar Dialog 1 component

Component Data

  • ID:calendar/calendar-dialog-1
  • Access:pro
  • Created:Oct 5, 2025
  • Type:example

Calendar Dialog 1 component design & features

This example uses the shadcn Calendar component inside a Dialog triggered by a Button in range mode with numberOfMonths set to two for selecting start and end dates.

Range calendars appear in travel booking, analytics date filters, and project timelines where users need both a start and end date.