wang-calendar

vue3+ts 可用的日历日程组件
555
Install
npm install wang-calendar
Latest Version:1.1.13
Vue:3
License:MIT
Last Updated:May 5, 2024
Links: Gitee  ·  npm
Maintainer: guihai_wang

=======

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 }

Version History

Version Released Vue License
1.1.13 ^3.2.47 MIT
1.1.12 ^3.2.47 MIT
1.1.11 ^3.2.47 MIT
1.1.10 ^3.2.47 MIT
1.1.9 ^3.2.47 MIT