vue3.0显示日历

### 集成 vue-simple-calendar 组件

为了在 Vue 3.0 项目中集成 `vue-simple-calendar` 日历组件，可以按照如下方法操作：

安装依赖库：

npm install vue-simple-calendar@latest --save

创建一个新的 Vue 组件来封装日历功能，在此假设文件名为 `CalendarComponent.vue`。

#### CalendarComponent.vue 文件内容

引入必要的样式和脚本资源，并定义模板结构以及逻辑处理部分[^1]。

<template>
    <div class="calendar-container">
        <!-- 使用 simple-calendar 标签 -->
        <simple-calendar :selected-date.sync="currentDate"
                         @date-changed="onDateChanged"/>
    </div>
</template>

<script>
import { SimpleCalendar } from 'vue-simple-calendar'
export default {
    name: "CalendarComponent",
    components: {
      SimpleCalendar,
    },
    data() {
        return {
            currentDate: new Date(),
        }
    },
    methods: {
        onDateChanged(newDate) {
          console.log(`Selected date changed to ${newDate}`)
        }
    }
}
</script>

<style scoped src='vue-simple-calendar/static/css/default.css'></style>
<!-- 或者自定义主题风格 -->
<!-- <style lang="scss" scoped>@import '~vue-simple-calendar/src/styles/simple-calendar';</style> -->

最后一步是在应用的主要布局或页面视图里注册该组件实例。如果采用的是单页应用程序架构，则可以在根级 App.vue 中完成这步配置；如果是多页面设置的话，则需依据具体需求决定放置位置。

对于 Ant Design Vue 的情况，由于其本身也提供了丰富的日期时间选择器组件，因此也可以考虑直接利用这些现成功能更便捷地构建所需界面效果[^2]。