Wang-calendar NPM

=======

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 }