Calendar
A date picker calendar component with month navigation and date selection.
<%= render Shadcn::CalendarComponent.new(selected: Date.new(2026, 8, 29), month: Date.new(2026, 8, 1)) %>
Installation
Add the component to your project:
rails generate shadcn:add calendarUsage
<%= render Shadcn::CalendarComponent.new(selected: Date.new(2026, 8, 29), month: Date.new(2026, 8, 1)) %>
Examples
Selected Date
Use the selected prop to set a pre-selected date.
<%= render Shadcn::CalendarComponent.new(selected: Date.today) %>
Form Integration
Use the name prop to enable form submission with a hidden input.
<div class="space-y-4">
<%= render Shadcn::LabelComponent.new { "Event Date" } %>
<%= render Shadcn::CalendarComponent.new(
name: "event[date]",
selected: Date.today
) %>
</div>
Date Range Constraints
Use min_date and max_date to constrain selectable dates.
<%= render Shadcn::CalendarComponent.new(
min_date: Date.today,
max_date: Date.today + 30.days
) %>
Disabled Dates
Use disabled_dates to disable specific dates (e.g., weekends).
<%= render Shadcn::CalendarComponent.new(disabled_dates: weekends) %>
Hide Outside Days
Set show_outside_days: false to hide days from adjacent months.
<%= render Shadcn::CalendarComponent.new(show_outside_days: false) %>
Disabled Days of Week
Use disabled_days_of_week to disable specific days (0=Sunday, 6=Saturday).
<%= render Shadcn::CalendarComponent.new(disabled_days_of_week: [0, 6]) %>
Multiple Selection
Use mode: :multiple to allow selecting multiple dates.
<%= render Shadcn::CalendarComponent.new(mode: :multiple) %>
Range Selection
Use mode: :range to select a date range.
<%= render Shadcn::CalendarComponent.new(mode: :range) %>
Required Selection
Use required: true to prevent deselection of the current value.
<%= render Shadcn::CalendarComponent.new(selected: Date.today, required: true) %>
Week Starts On Monday
Use week_starts_on: 1 to start weeks on Monday instead of Sunday.
<%= render Shadcn::CalendarComponent.new(week_starts_on: 1) %>
API Reference
CalendarComponent
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| selected |
Date, Array<Date>
|
nil
|
Currently selected date(s). Array for multiple/range modes. |
| month |
Date
|
Date.today
|
Month to display (defaults to selected date's month or current month) |
| min_date |
Date
|
nil
|
Minimum selectable date |
| max_date |
Date
|
nil
|
Maximum selectable date |
| name |
String
|
nil
|
Form field name for hidden input |
| disabled_dates |
Array<Date>
|
[]
|
Specific dates that cannot be selected |
| disabled_days_of_week |
Array<Integer>
|
[]
|
Days of week to disable (0=Sunday, 6=Saturday) |
| show_outside_days |
Boolean
|
true
|
Whether to show days outside the current month |
| mode |
Symbol
|
:single
|
Selection mode: :single, :multiple, or :range |
| required |
Boolean
|
false
|
Whether a selection is required (prevents deselection) |
| week_starts_on |
Integer
|
0
|
First day of week (0=Sunday, 1=Monday, etc.) |
| class_name |
String
|
nil
|
Additional CSS classes |
Keyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between navigation buttons and days |
| Enter / Space | Select the focused date |
Events
The Calendar dispatches a shadcn--calendar:select event when a date is selected.
element.addEventListener("shadcn--calendar:select", (event) => {
console.log(event.detail.date) // JavaScript Date object
console.log(event.detail.dateString) // ISO date string (YYYY-MM-DD)
})
Accessibility
- Uses
role="grid"on the calendar container - Navigation buttons have
aria-labelfor screen readers aria-selectedindicates the currently selected datearia-disabledindicates disabled dates- Disabled dates have
tabindex="-1"to skip in keyboard navigation
On This Page