Calendar
A date picker calendar component with month navigation and date selection.
Installation
Add the component to your project:
rails generate shadcn:component calendarUsage
<%= render Shadcn::CalendarComponent.new %>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.
<%= render Shadcn::CalendarComponent.new(
name: "event[date]",
selected: Date.today
) %>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).
<%
# Disable weekends in current month
month_start = Date.today.beginning_of_month
month_end = Date.today.end_of_month
weekends = (month_start..month_end).select { |d| d.saturday? || d.sunday? }
%>
<%= render Shadcn::CalendarComponent.new(
disabled_dates: weekends
) %>Hide Outside Days
Set show_outside_days: false to hide days from adjacent months.
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] # Disable weekends
) %>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 # Monday
) %>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