stimulus-calendar-js

Create client-side event calendars with Stimulus.js views and drag-and-drop.

1|Updated May 25, 2026

Search Tags:#hotwire #calendar integration #event calendar #stimulus.js #drag & drop

Ready to run

npx skills add https://github.com/schappim/stimulus_calendar --skill stimulus-calendar-js

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: stimulus-calendar-js
Source: https://github.com/schappim/stimulus_calendar/tree/main/skills/stimulus-calendar-js
Command: npx skills add https://github.com/schappim/stimulus_calendar --skill stimulus-calendar-js

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @hotwired/stimulus, stimulus-calendar, and includes scripts (resource) components.

What problem does it solve?

This Skill simplifies the process of adding interactive calendars to web applications built with Stimulus.js (Hotwire), allowing for easy integration and customization of event schedules.

Core Features & Use Cases

Drag & Drop and Resizing: Users can drag and drop events or resize them within the calendar.
Multi-User Sync: Supports live updates between users using Turbo Streams or other broadcast channels.
Event Configuration: Fully customizable via HTML data attributes, allowing for various views and configurations.

Quick Start

To create a calendar, use the data-controller="calendar" attribute on a <div> element and define the view and options with data-* attributes.

Frequently Asked Questions about stimulus-calendar-js

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add an interactive event calendar to a Stimulus.js application?▼

To add an interactive event calendar to a Stimulus.js application, apply the data-controller="calendar" attribute to a div and configure views and options using data-* attributes.

Can I implement drag and drop event scheduling with Hotwire?▼

Yes, you can implement drag and drop event scheduling with Hotwire using this Stimulus.js controller, which supports dragging, dropping, and resizing events directly within the calendar interface.

Does this Stimulus.js calendar support live multi-user sync?▼

Yes, this Stimulus.js calendar supports live multi-user sync by integrating with Turbo Streams or other broadcast channels to push real-time event updates between users.

What calendar views are available for event scheduling in Stimulus.js?▼

The available event scheduling views in Stimulus.js include month, week, day, list, resource, and timeline views, all configurable directly through HTML data attributes.

Do I need additional libraries to use this event calendar with Stimulus.js?▼

Yes, you need additional libraries to use this event calendar: the @hotwired/stimulus package and the stimulus-calendar package are required dependencies for full calendar functionality.