```javascript import Vuetify from 'vuetify' import 'vuetify/dist/vuetify.min.css' import 'material-design-icons-iconfont/dist/material-design-icons.css' import 'classbro-timetable/dist/lib/dayspan-vuetify.min.css' import DaySpanVuetify from "classbro
npm install classbro-timetable-webjavascript
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import 'classbro-timetable/dist/lib/dayspan-vuetify.min.css'
import DaySpanVuetify from "classbro-timetable";
Vue.use(Vuetify);
Vue.use(DaySpanVuetify, {
data: {
},
computed: {
},
methods: {
getDefaultEventColor: () => '#1976d2'
}
});
`
如何引用
`javascript
:modelType="modelType" // 默认不传值-1，若传值则1：周模式；0：日模式
:hasModel="hasModel" // 是否需要模式切换，默认true
:read-only="readOnly" // 是否仅读，默认false
:value="defaultEvents" // 初始值
:dayValue="dayValue" // 日模式下的初始值
:dayData="dayData" // 在日历上显示点
:validTimes="validTimes" // 可以操作的时间范围，
// 数组格式，[{start: 'XXX', end: 'XXX'}],
// XXX：yyyy-MM-dd hh:mm:ss 表示具体某一天的时间
// hh:mm:ss 表示一周内的时间
:noWeekends="noWeekends" // 是否禁止周末， 默认false， false: 不禁止, true: 禁止
:vacationTime="vacationTime" // 假期 ["2020-06-25", "2020-06-26"]
:hasBorder="hasBorder" //周模式下每天时间的边框1默认展示，2不展示
:showTime="showTime" //周模式下每天时间的备注：1默认展示，2展示8：00,16:00,24:00
:topType="topType" //头部类型1是默认2含时间开关
:onlyShowWeekTop="onlyShowWeekTop" //只展示周模式的头部
:firstMemo="firstMemo" //周模式第一列的配置信息（宽、文字）
@mouse-down="mouseDown" // 鼠标按下事件
@mouse-down-event="mouseDownEvent" // 鼠标在课程上的按下事件
@mouse-move="mouseMove" // 鼠标移动事件
@mouse-up="mouseUp" // 鼠标抬起事件
@mouse-up-event="mouseUpEvent" // 鼠标在课程上的抬起事件
@added="handleAdded" // 日历单元格中添加课程事件
@adding="handleAddDay" // 月模式添加课程
@changeDate="changeDate" // 日历中确定移动更新事件
@add-class="handleAdd" // 日模式下添加课程事件
@picked="onPicked" // 日模式下切换日期事件
@prompt="handleMove" // 是否确定移动事件
>
如果需要有删除操作执行 this.$refs.app.remove(slotData)，且弹窗一定要放在这个插槽里，因为需要获取slotData
如果没有删除操作执行 弹窗可以不放在这个插槽里
``