vue-calendar-by-week v1.0.22

vue-calendar-by-week

为用户提供周日历日程表设计，用户可通过自由拖动选区建立日程事件。

使用

npm install vue-calendar-by-week
// 或者
yarn add vue-calendar-by-week

// vue项目入口文件main.js内
import CalendarByWeek from "vue-calendar-by-week";
Vue.use(CalendarByWeek);

<!-- 需要引入日程表的地方 -->
<CalendarByWeek
  ref="myCalendar"
  :granularity="10"
  :start-time="8"
  :end-time="22"
  start-date="2020/11/23"
  :data="list"
  :readonly="false"
  @on-selected="onSelected"
  @on-contextmenu="onContextMenu"
/>

Calendar props

Calendar events

Calendar methods

Calendar slot

如：

<!-- item -->
<template slot="item" slot-scope="slotProps">
  <div class="slot-item">
    {{slotProps.item.time}}<br />{{slotProps.item.content}}
  </div>
</template>

data

结构化记录描述数据对象，是 data 内的一项

disabled-time

设置不可选择的时间段，参数为当前时间段time，需要返回 Boolean 是否禁用该时间段，time（YYYY/MM/DD HH:mm:ss）表示当前时间颗粒的开始时间。

如：

<template>
    <CalendarByWeek disabled-time="disabledTime" />
</template>
<script>
export default {
    data() {
        return {
            disabledTime: function(time) {
                let currentTime = new Date().getTime();
                let start_time = new Date(time).getTime();
                return currentTime < start_time;
            }
        }
    }
}
</script>

设计

提供一个整体表格的二维数组，根据 granularity 和 unit-time。

日程记录 record，关于渲染的内容：

{
  "id": "",
  "start_time": "",
  "end_time": "",
  "content": ""
}