skills.rest
schappim
schappimCOMMUNITY
Explore all skills by this author →
𝕏@schappiGitHub

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
One-click install
npx skills add https://github.com/schappim/stimulus_calendar --skill stimulus-calendar-js
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
sinfinsinfin
10

folio-stimulus

Register Stimulus controllers and add data attributes for Folio components.

Official
Intermediate
RoleModelRoleModel
6

action-cable

Set up ActionCable connections, channels, and client consumers in Rails.

Official
Intermediate
ali-masterali-master
8

oRPC Client Event Iterator

Manage oRPC client event streams with an asynchronous iterator.

Community
Intermediate
CodapopKSPCodapopKSP
26

calendar-math

Implement calendar algorithms and date conversions in vanilla JavaScript.

Community
Advanced