vue-scheduling-calendar
0.1.6 • Public • Published
VueSchedulingCalendar
一个用于排班展示的的 vue 日历组件
安装
npm install vue-scheduling-calendar -S
或者
yarn add vue-scheduling-calendar
使用
在main.js
中引入插件并注册
#main.js
import VueSchedulingCalendar from "vue-scheduling-calendar";
import "vue-scheduling-calendar/dist/vue-scheduling-calendar.css";
Vue.use(VueSchedulingCalendar)
在main.js中引入插件并注册
在项目中使用 VueSchedulingCalendar
<template>
<Vue-scheduling-calendar />
</template>
参数
参数 |
类型 |
必填 |
默认 |
说明 |
showCalendar |
Boolean |
false |
true |
控制日历是否显示 |
mainColor |
String |
false |
#148eeb |
主要颜色 |
showCurrentDate |
Boolean |
false |
true |
是否突出显示默认日期 |
itemBorderRadius |
Boolean |
false |
true |
日期点击按钮圆角 |
currentTextColor |
String |
false |
#148eeb |
选中字体颜色 |
currentBackgroundColor |
String |
false |
"#eaf3fc" |
选中项的背景颜色 |
dateMonth |
String |
false |
${new Date().getFullYear()}-${new Date().getMonth() + 1} |
传入的年月 如2021-04-19或者2021/04/19,不传默认当前年月 |
事件
事件名 |
说明 |
回调参数 |
dayClick |
日历按钮点击事件,返回值年月日 YYYY-MM-DD或者YYYY/MM/DD |
|
slot
名称 |
说明 |
dataItem |
作用域插槽,为每个日历的每一项内容,插槽内容在日期的下面居中展示,组件会给插槽绑定当前的日期内容,插槽内容v-slot:dataItem="slotProps" slotProps.item即为当前循环项,详见example |
footer |
底部注脚,可插入一些图例之类的 |
License
MIT license
Package Sidebar
Install
npm i vue-scheduling-calendar
Weekly Downloads