vue-scheduling-calendar

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