classbro-timetable

在dayspan-vuetify的基础上做了小部分修改以满足公司日历模块的需求，并重新命名为classbro-timetable

使用

npm install --save classbro-timetable

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'
  }
});

如何引用

<template>
  <v-app id="dayspan" v-cloak>
    <ds-calendar-app

      :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"  // 是否确定移动事件
    >
      <!-- 在表头右侧添加操作按钮的插槽 name="menuRight"-->
      <template slot="menuRight"></template>

      <!-- 有课程的单元格内显示课程的插槽 name="eventTimeTitle"-->
      <template slot="eventTimeTitle" slot-scope="{calendarEvent, details}">
    	<!-- details抛出的是当前课程详情 -->
      </template>
      
      <!-- 点击单元格中的课程部分显示弹窗 -->
      <template slot="eventPopover" slot-scope="slotData">
        如果需要有删除操作执行 this.$refs.app.remove(slotData)，且弹窗一定要放在这个插槽里，因为需要获取slotData
        如果没有删除操作执行 弹窗可以不放在这个插槽里
      </template>
      
      <!-- 日模式下的时间线 -->
      <!-- 最上面的内容插槽 name="classTop"-->
      <template slot="classTop" slot-scope="{currentType, calendar}">
        
      </template>

      <!-- 时间线课程主内容插槽 name="classContent"-->
      <template slot="classContent" slot-scope="{dayValue, summary}">
        
      </template>

      <!-- 时间线底部添加课程插槽 name="classBottom" -->
      <template slot="classBottom" slot-scope="{currentType, calendar}">
      </template>
    </ds-calendar-app>
  </v-app>
</template>

<script>
export default {
  name: "dayspan",

  data: vm => ({
    // dayValue格式[{time: '', data:[]},{time: '', data:[]} ]
    dayValue: [
      {
        time: "2020-03-23 13:00-14:00",
        data: [
          {
            title: "定制辅导-1237849784-销售"
          },
          {
            title: "定制辅导-1237849784-销售"
          },
        ]
      }
    ],

    // defaultEvents 格式[{data: {title: '', ...}, schedule: {dayOfWeek: [num], weekspanOfMonth: [num], lastDayOfMonth: [num], times: [num], duration: num, durationUnit: '' }}]
    defaultEvents: [
      {
        data: {
          // 必传参数
          title: "定制辅导-1237849784-销售",

          color: "#3F51B5"
        },
        schedule: {
          // 每周几都会有课
          dayOfWeek: [4],
          // 每月第几周都会有课
          weekspanOfMonth: [3],
          // 每个月倒数某一天会有课
          lastDayOfMonth: [3],
          // 开始时间
          times: [13],
          // 区间
          duration: 3,
          // 区间单位 hours / days
          durationUnit: "hours"
        }
      }
    ],
    // 调这个接口/api/student/course/queryClassroomForDate，返回如下数据格式（必须是这个格式才行）
    dayData: [
      {
        date: "1",
        classrooms: [{}]
      },
      {
        date: "2",
        classrooms: [{}]
      },
      {
        date: "3",
        classrooms: [{}]
      },
      {
        date: "4",
        classrooms: [{}]
      },
      {
        date: "5",
        classrooms: [{}]
      }
    ],
  }),

  methods: {
    // 删除事件
    // this.$refs.app.remove(slotData)
    changeDate(eventUpdate) {},
    onPicked(data) { },
    mouseDown($event) {},
    mouseDownEvent($event) {},
    mouseMove($event) { },
    mouseUp($event, data) { },
    mouseUpEvent($event) {},
    handleAdded($event) {},
    handleAdd($event) { },
    handleMove(prompt) { },
    onMove(item) { }
};
</script>