=======

wang_calendar

介绍

vue3 + ts 日历日程组件 采用 vue + ts 完成整个项目，可以用在vue项目中

安装教程

1. 安装

# yarn
yarn install wang-calendar
# npm
npm i wang-calendar
# pnpm
pnpm install wang-calendar

2. 注册组件

// 全局注册使用 main.js
import WangCalendar from 'wang-calendar'
import 'wang-calendar/style.css'

app.use(WangCalendar)

// 局部注册使用  App.vue
import { WangCalendar, WangScrollbar } from 'wang-calendar'
import 'wang-calendar/style.css'

3. 使用

<wang-calendar v-model="date" :events="events" />
<WangScrollbar :height?="xxx" :width?="xxx">
    <!-- 你的内容 -->
</WangScrollbar>

使用说明

1. 属性

|属性名|说明|类型|可选值|默认值| |---|---|---|---|---| |v-model|日期|Date|-|new Date()| |events|日程|{ id: number, begin: string, end: string, title: string,[key: string]: any }[]|-|-| |height|组件高度|number|>=500|500|

2. 事件

|事件名|说明|回调参数| |---|---|---| |clickDays|当用户点击日期单元格的时候触发|{ day: string, date: Date }| |clickEvents|当用户点击日程显示块的时候触发|{ index: number, id: number }|

3. 插槽

|名称|说明| |---|---| |day|日历在月份视图下日期单元格显示自定义内容,参数为{ type?: 'prev' | 'current' | 'next', day: string, date: Date, isSelected?: boolean, isToday?: boolean }|