El Calendar

Calendar Component

Calendar component displays dates with customizable content and range.

When to Use

• Date selection
• Event calendars
• Schedule displays
• Date range views

Basic Usage

  

import { ref } from 'vue'

const date = ref(new Date())

Custom Content

  
    
      {{ data.day.split('-')[2] }}
    
  

Range

  

const startDate = new Date(2024, 0, 1)
const endDate = new Date(2024, 1, 28)

Custom Header

  
    
      {{ date }}
    
  

API Reference

Attributes

| Name | Description | Type | Default | |------|-------------|------|---------| | model-value / v-model | Binding value | Date | — | | range | Time range | [Date, Date] | — | | controller-type | Controller type | 'button' \| 'select' | 'button' | | formatter | Format label | (value, type) => string \| number | — |

Slots

| Name | Description | Type | |------|-------------|------| | date-cell | Custom date cell | { data: { type, isSelected, day, date } } | | header | Custom header | { date: string } |

Exposes

| Name | Description | Type | |------|-------------|------| | selectedDay | Currently selected date | ComputedRef | | pickDay | Select a specific date | (day) => void | | selectDate | Select date | (type) => void |

Best Practices

1. Use date-cell slot for custom content
2. Use range for limited date views
3. Customize header for branding

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: jiaiyan
• Source: jiaiyan/element-plus-skills
• License: MIT
• Homepage: https://skills.sh/jiaiyan/element-plus-skills/element-plus-skills

Install and usage instructions live in the source repository linked above.