适用于vue的Calendar组件

Vue.js 中有许多优秀的第三方库可以帮助你创建 Calendar（日历）组件，以下是几个常用的选项：

1. **Vuetify**: Vuetify是一个基于 Material Design 的 Vue UI 框架，它内置了日期选择器 (`v-calendar`) 和时间选择器 (`v-time-picker`)，可以满足基本的日历需求。

<template>
  <v-date-picker v-model="selectedDate" />
</template>

<script>
import { VDatePicker } from 'vuetify';
export default {
  components: {
    VDatePicker,
  },
  data() {
    return {
      selectedDate: new Date(),
    };
  },
};
</script>

2. **Element Plus**: Element Plus 提供了一个完整的 Calendar 组件 (`el-date-picker`)，同样支持日期和时间的选择。

<template>
  <el-date-picker v-model="selectedDate" type="date"></el-date-picker>
</template>

<script>
import { ElDatePicker } from 'element-plus';
export default {
  components: {
    ElDatePicker,
  },
  data() {
    return {
      selectedDate: '',
    };
  },
};
</script>

3. **Quasar Framework**: Quasar也有一个 Calendar 组件 (`QCalendar`)，提供定制化的交互和配置选项。

<template>
  <q-calendar v-model="selectedDate"></q-calendar>
</template>

<script>
import { QCalendar } from 'quasar';
export default {
  components: {
    QCalendar,
  },
  data() {
    return {
      selectedDate: null,
    };
  },
};
</script>

4. **Purely Vue**: 如果你喜欢轻量级的库，你可以选择如 `vue-calendario` 或 `vuejs-datepicker` 这样的插件，它们可以直接在 Vue 实例上使用。

选择合适的日历组件取决于你的项目需求、UI风格以及对依赖管理的要求。安装后，记得按照文档进行配置和使用。