Calendar Component
A modern, sleek, and fully interactive calendar system built with ViewComponent, Stimulus, and Tailwind CSS.
Month Navigation
Easily navigate between months with smooth transitions and keyboard support.
Color-Coded Events
Multiple event types with distinct colors for easy visual identification.
Fully Responsive
Adapts beautifully to any screen size, from mobile to desktop.
Interactive Calendar
August 2026
Event Types
Multiple Calendars
Display multiple months side by side for better planning and overview.
August 2026
September 2026
Usage Example
Basic Usage
<%= render(CalendarComponent.new(
year: Date.today.year,
month: Date.today.month,
show_controls: true,
events: [
{
id: 1,
date: Date.today,
title: "Team Meeting",
type: :primary,
icon: "👥",
time: "10:00 AM"
}
]
)) %>Event Properties
id
Unique identifier for the event
date
Date object for when the event occurs
title
The event title/name
type
:primary, :secondary, :accent, :success, :warning, :info
icon
Optional emoji or icon character
time
Optional time string for the event
Component Options
year
Year to display (default: current year)
month
Month to display (default: current month)
show_controls
Show/hide navigation controls (default: true)
events
Array of event hashes to display
Interactive Features
Click to Select Days
Click any day to select it and trigger custom events
Month Navigation
Use arrow buttons to navigate between months
Event Hover Effects
Hover over events to see them highlighted
Custom Event Dispatching
Dispatches calendar:daySelected and calendar:monthChanged events
Responsive Design
Adapts to mobile, tablet, and desktop screens
Stimulus Integration
Listen to Calendar Events
// In your Stimulus controller
connect() {
this.element.addEventListener('calendar:daySelected', (event) => {
console.log('Selected date:', event.detail.date)
})
this.element.addEventListener('calendar:monthChanged', (event) => {
console.log('Month changed:', event.detail.year, event.detail.month)
})
}