el-calendar

Name: el-calendar
Availability: InStock
Author: jiaiyan

Render an interactive calendar with date selection and range support for Vue apps.

21|2|Updated Mar 13, 2026

Search Tags:#calendar #vue3 #slots #date-range #element-plus #date-selection

Ready to run

npx skills add https://github.com/jiaiyan/element-plus-skills --skill el-calendar

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: el-calendar
Source: https://github.com/jiaiyan/element-plus-skills/tree/main/components/el-calendar
Command: npx skills add https://github.com/jiaiyan/element-plus-skills --skill el-calendar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Managing dates and calendar views in UI can be tedious without a reusable component. el-calendar provides an interactive calendar that displays dates, handles user selections, and supports date ranges, eliminating custom build work.

Core Features & Use Cases

Date display, selection, and range support via v-model binding to enable reactive date handling.
Customizable header and date-cell content through slots for branding and specialized views.
Exposes selectedDay, pickDay, and selectDate for programmatic control and integration with other components.
Suitable for booking interfaces, event planning, timelines, and any calendar-based workflows.

Quick Start

Instantiate the el-calendar component and bind a reactive date value to enable date selection and range viewing.

Frequently Asked Questions about el-calendar

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

FAQPage Schema

How do I create a Vue3 calendar component for date selection and scheduling?▼

A Vue3 calendar component for date selection provides interactive date display, day picking, and range management through v-model binding, eliminating custom build work for scheduling interfaces.

Can I customize the header and date cells in an Element Plus calendar?▼

Yes, you can customize the header and date-cell content in an Element Plus calendar using slots. This allows for branding and specialized views by injecting custom templates directly into the calendar grid.

Does this calendar component support date-range selection for booking interfaces?▼

Yes, the calendar component supports date-range selection for booking interfaces. It handles user selections and manages ranges via reactive model-value binding, making it suitable for event planning and timelines.

How do I programmatically control date selection in a Vue3 calendar?▼

You programmatically control date selection in a Vue3 calendar by using exposed methods like pickDay and selectDate. These functions allow direct integration and manipulation of the selectedDay value from other components.

What is the best way to handle reactive date handling in Vue-based apps?▼

The best way to handle reactive dates in Vue-based apps is using a calendar component with v-model binding. This approach maps reactive date values directly to the UI, ensuring display and selection stay synchronized.