# classbro-timetable-web

> ```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

Latest version **1.3.73** (published 2021-03-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install classbro-timetable-web
pnpm add classbro-timetable-web
yarn add classbro-timetable-web
bun add classbro-timetable-web
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.73 |
| Published | 2021-03-25 |
| First published | 2021-01-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 6 |
| Unpacked size | 1 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | stt |
| Maintainers | classbro |
| Keywords | time |

## Links

- npm: https://www.npmjs.com/package/classbro-timetable-web
- Repository: http://192.168.1.129:1080/classbro/classbro-timetable-vue
- npm.io page: https://npm.io/package/classbro-timetable-web

## Dependencies (6)

- [vue](https://npm.io/package/vue.md) ^2.3.3
- [user](https://npm.io/package/user.md) 0.0.0
- [dayspan](https://npm.io/package/dayspan.md) 0.12.2
- [vuetify](https://npm.io/package/vuetify.md) 1.3.9
- [vuedraggable](https://npm.io/package/vuedraggable.md) ^2.24.3
- [material-design-icons-iconfont](https://npm.io/package/material-design-icons-iconfont.md) 3.0.3

## Alternatives

- [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads
- [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads
- [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads
- [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads

## Recent versions

- 1.3.73 (latest) — 2021-03-25
- 1.1.2 — 2021-03-24
- 1.3.71 — 2021-03-23
- 1.3.70 — 2021-03-23
- 1.3.69 — 2021-03-23
- 1.3.68 — 2021-03-23
- 1.3.66 — 2021-03-23
- 1.3.65 — 2021-03-23
- 1.3.64 — 2021-03-23
- 1.3.63 — 2021-03-23
- 1.1.1 — 2021-03-19
- 1.1.0 — 2021-03-19
- 1.0.0 — 2021-03-19
- 1.3.62 — 2021-03-01
- 1.3.61 — 2021-02-27
- … 35 more at https://npm.io/package/classbro-timetable-web/versions

## README

## classbro-timetable

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

## 使用

#### npm install --save classbro-timetable

```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-timetable";


Vue.use(Vuetify);
Vue.use(DaySpanVuetify, {
  
  data: {
    
  },
  computed: {
    
  },
  methods: {
    
    getDefaultEventColor: () => '#1976d2'
  }
});
```

## 如何引用

```javascript
<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>

```

---
_Source: https://npm.io/package/classbro-timetable-web · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._