Calendar
Displays a date picker calendar with single and range selection.
Usage
<%= render "components/calendar" %>With Selected Date
<%= render "components/calendar", selected: Date.today %>Examples
Single Selection
<%= render "components/calendar",
mode: :single,
selected: Date.today %>Range Selection
<%= render "components/calendar",
mode: :range,
selected: Date.today,
selected_end: Date.today + 5 %>With Date Constraints
<%= render "components/calendar",
min_date: Date.today,
max_date: Date.today + 14 %>Week Starting Monday
<%= render "components/calendar",
week_starts_on: :monday %>Form Integration
<%= form_with model: @event do |f| %>
<%= render "components/calendar",
selected: @event.date,
input_name: "event[date]" %>
<% end %>Range Form Integration
<%= render "components/calendar",
mode: :range,
input_name: "booking[check_in]",
input_name_end: "booking[check_out]" %>API Reference
Calendar
| Parameter | Type | Default | Description |
|---|---|---|---|
| selected | Date, String | nil | Selected start date |
| selected_end | Date, String | nil | Selected end date (range mode) |
| month | Integer | nil | Display month (1-12) |
| year | Integer | nil | Display year |
| mode | Symbol | :single | :single or :range |
| min_date | Date, String | nil | Minimum selectable date |
| max_date | Date, String | nil | Maximum selectable date |
| disabled_dates | Array | [] | Dates to disable |
| show_outside_days | Boolean | true | Show days from adjacent months |
| week_starts_on | Symbol | :sunday | :sunday or :monday |
| cell_size | String | nil | Custom cell size CSS value |
| input_name | String | nil | Hidden input name for forms |
| input_name_end | String | nil | End date hidden input name |
| css_classes | String | "" | Additional CSS classes |
| html_options | Hash | {} | Additional HTML attributes |
Calendar Header
| Parameter | Type | Default | Description |
|---|---|---|---|
| month | Integer | required | Display month |
| year | Integer | required | Display year |
| month_name | String | required | Formatted month name |
| css_classes | String | "" | Additional CSS classes |
| html_options | Hash | {} | Additional HTML attributes |