v-calendar 用法

v-calendar 是一个基于 Vue.js 的日历组件库，提供了丰富的功能和灵活的定制选项。以下是 v-calendar 的基本用法：

1. 安装 v-calendar：

npm install v-calendar@next

2. 在 Vue 项目中引入 v-calendar：

import Vue from 'vue';
import VCalendar from 'v-calendar';
import 'v-calendar/lib/style.css';

Vue.use(VCalendar);

3. 在组件中使用 v-calendar：

<template>
  <v-calendar :attributes="attributes"></v-calendar>
</template>

<script>
export default {
  data() {
    return {
      attributes: [
        {
          key: 'today',
          highlight: {
            backgroundColor: '#ff8080',
          },
          dates: new Date(),
        },
      ],
    };
  },
};
</script>

### 主要功能

1. **日期选择**：用户可以选择单个日期或日期范围。
2. **事件标记**：可以在日历上标记事件或特殊日期。
3. **自定义样式**：可以自定义日历的外观和样式。
4. **国际化**：支持多语言和本地化。

### 示例代码

以下是一个更复杂的示例，展示如何在日历上标记多个事件：

<template>
  <v-calendar :attributes="attributes"></v-calendar>
</template>

<script>
export default {
  data() {
    return {
      attributes: [
        {
          key: 'event1',
          dates: '2023-10-15',
          highlight: {
            color: 'blue',
          },
          popover: {
            label: 'Event 1',
          },
        },
        {
          key: 'event2',
          dates: '2023-10-20',
          highlight: {
            color: 'green',
          },
          popover: {
            label: 'Event 2',
          },
        },
      ],
    };
  },
};
</script>

### 高级功能

1. **日期范围选择**：

<v-calendar is-range v-model="selectedDates"></v-calendar>

2. **自定义事件**：

<v-calendar :attributes="attributes">
  <template #day-popover="{ day, attributes }">
    <div v-for="attr in attributes" :key="attr.key">
      <p>{{ attr.popover.label }}</p>
    </div>
  </template>
</v-calendar>

v-calendar 提供了丰富的文档和示例，可以帮助开发者快速上手并实现复杂的日历功能。