# El Calendar

> Calendar component for displaying dates. Invoke when user needs to display a calendar view, select dates, or show scheduled events.

- **Type:** Skill
- **Install:** `agentstack add skill-jiaiyan-element-plus-skills-el-calendar`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [jiaiyan](https://agentstack.voostack.com/s/jiaiyan)
- **Installs:** 0
- **Category:** [Productivity](https://agentstack.voostack.com/c/productivity)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [jiaiyan](https://github.com/jiaiyan)
- **Source:** https://github.com/jiaiyan/element-plus-skills/tree/main/components/el-calendar
- **Website:** https://skills.sh/jiaiyan/element-plus-skills/element-plus-skills

## Install

```sh
agentstack add skill-jiaiyan-element-plus-skills-el-calendar
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

```vue

  

import { ref } from 'vue'

const date = ref(new Date())

```

## Custom Content

```vue

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

```

## Range

```vue

  

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

```

## Custom Header

```vue

  
    
      {{ 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](https://github.com/jiaiyan)
- **Source:** [jiaiyan/element-plus-skills](https://github.com/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.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-jiaiyan-element-plus-skills-el-calendar
- Seller: https://agentstack.voostack.com/s/jiaiyan
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.