Calendar
Interactive calendar component for date display and selection. Supports month navigation, event dots, date range constraints, keyboard navigation, and configurable week start day.
Month
Full month grid with day numbers, navigation, today highlight, event dots, and date selection
_calendar.html.erb
███ ███████ ██████ ███████████████████ ███████ ███ ██████████████ ████ █████████ ████ █████████ ████ ███████████ ████████ ██████████ ██
██
████████████ █ █████████████████████ ██████ ██████████
████████ █ █████████████ █ ███████████████████████████████ ██████ ████ █ ███
█████ █ ████████ █ ██████████████████████████ ██████ ████ █ ███
█████ █ ████████ █ ██████████████████████████ ██████ ████ █ ███
█████ █ ██████████
██████████████ █ ███████████████████████████████
█████████████ █ █████████████████████████
calendar_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ██████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████████ ███████
██████ ██████ █ █
█████ ███████
█████████████ ███████
██████████ █ █████ ███████ ████████ ████████ ██
████████ ███████
calendar_month_component.html.erb
████ ██████████ █████████████████ ███ ████████ ███████████████████ █ ███ ██ ███████████████ ████████ ███████ ████
███ ██████ ████ ██████████ ███ ██████████ ██████ ██
████ ███████████ ████████████ ███████████████ ████ ████ ████████ ████████████████ ███████████████████████
███████
█████████████
██████████ ██████████████████ ███
██████████████████████████████████
████████████████████ ██████
█
████ ██████████ ████ ███████████ ██████████ █ ██ ███ ████████████████ ██████████████████████
calendar_month_component.rb
█ ██████████████████████ ████
█████ ██████████████████████ █ ███████████████████
███████████ ██████████████ ██████████ ███████ ███████ ████████████ ███████
███ ████████████████ ███████████████████ ███████ ███ ██████████████ ████ █████████ ████ █████████ ████ ███████████ ████████
█████████████ █ ████████████████ ██ ██████████
█████████ █ █████████████████████████
██████ █ ████████████████████
██████ █ ████████████████████
calendar_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ██████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████████ ███████
██████ ██████ █ █
█████ ███████
█████████████ ███████
██████████ █ █████ ███████ ████████ ████████ ██
████████ ███████
Mini
Compact date picker calendar with smaller cells and abbreviated labels
_calendar.html.erb
███ ███████ ██████ ███████████████████ ██████████████ ████ █████████ ████ █████████ ████ ███████████ ████████ ██████████ ██
██
████████████ █ █████████████████████ ██████ ██████████
████████ █ █████████████ █ ███████████████████████████████ ██████ ████ █ ███
█████ █ ████████ █ ██████████████████████████ ██████ ████ █ ███
█████ █ ████████ █ ██████████████████████████ ██████ ████ █ ███
█████ █ ██████████
██████████████ █ ███████████████████████████████
calendar_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ██████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████████ ███████
██████ ██████ █ █
█████ ███████
█████████████ ███████
██████████ █ █████ ███████ ████████ ████████ ██
████████ ███████
calendar_mini_component.rb
█ ██████████████████████ ████
█████ █████████████████████ █ ███████████████████
███████████ ██████████████ ██████████ ███████ ███████ ███████████
███ ████████████████ ███████████████████ ██████████████ ████ █████████ ████ █████████ ████ ███████████ ████████
█████████████ █ ████████████████ ██ ██████████
█████████ █ █████████████████████████
██████ █ ████████████████████
██████ █ ████████████████████
calendar_mini_component.html.erb
████ ██████████ █████████████████ ███ ████████ ███████████████████ █ ███ ██ ███████████████ ████████ ███████ ████
███ ███████ ██████ ██
████ ███████████ ████████████ ███████████████ ████ ██████
███████
█████████████
██████████ ██████████████████ ███
██████████████████████████████████
████████████████████ ██████
█
████ ██████████ ████ ███████████ ██████████ █ ██ ███ ████████████████ ██████████████████████
calendar_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ██████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████████ ███████
██████ ██████ █ █
█████ ███████
█████████████ ███████
██████████ █ █████ ███████ ████████ ████████ ██
████████ ███████
Changelog
- v1.0.0: Initial release with month and mini styles
- Full month grid with event dots and date selection
- Compact mini calendar picker
- Keyboard navigation with arrow keys
- Configurable week start (Sunday/Monday)
- Min/max date range constraints
Get Full Access
Unlock the source code for this component and all others. One-time payment for lifetime access.
Get Access Now