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

| 属性 | 说明 | 类型 | 默认值 | | :--------------: | :------------------------------------------------------------------------------------------ | :-----------: | :------------------: | | granularity | 单位时间间隔颗粒度，需要可平分 1 个小时，如：10，30，15 等 | Number/String | 30 | | data | 显示的结构化数据，表示日程表记录，具体格式见后文 | Array | [] | | start-date | 必填，开始日期，本日程表目前以周为单位进行设计，展示该日期往后一周的日历 | String | - | | unit-time | 日程表单位时间，整数，以小时为单位 | Number/String | 1 | | start-time | 日程表单位开始时间，目前仅支持整点，24 小时制 | Number/String | 0 | | end-time | 日程表单位结束时间，目前仅支持整点，24 小时制 | Number/String | 24 | | readonly | 日程表表格操作状态，为 true 时仅作展示使用 | Boolean | true | | disabled-time | 设置不可选择的时间段，函数，参数为当前时间段，需要返回 Boolean 是否禁用该时间段，具体见后文 | Function | 小于当前时间均不可选 | | need-bottom-time | 底部结束时间 | Boolean | false | | has-header | 是否显示表格头部 | Boolean | true | | space-line | 单元格间隙横线粗细X（表示Xpx solid #eeeeee） | Number | 0 |

Calendar events

| 事件名 | 说明 | 返回值 | | :------------: | :----------------------------- | :----------------------------------------------- | | on-selected | 拖动选取时间段单元格完成时触发 | object，选中的资源对象，内容包括时间段和日期等 | | on-contextmenu | 日程记录右击事件 | row，record，event | | on-error | 日程表格错误反馈 | msg |

Calendar methods

| 事件名 | 说明 | 参数 | | :----------: | :----------- | :--- | | cancelSelect | 清除当前选择 | 无 |

Calendar slot

| 名称 | 说明 | 属性 | | :---------: | :--------------------------- | :------------------------------------------- | | thead | 日历表格头部内容 | item，对象格式，{date:'日期',day:'周几'} | | item | 日程项，可自定义设置日程内容 | item，日程条目，具体见下文data | | contextMenu | 右键菜单 |

如：

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

data

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

| 属性 | 说明 | 类型 | 默认值 | | :--------: | :-------------------- | :----: | :----: | | id | 日程记录主键 | String | - | | date | 日程日期，YY/MM/DD | String | - | | start_time | 日程开始时间点，hh:mm | String | - | | end_time | 日程结束时间点，hh:mm | String | - | | content | 日程内容 | String | - |

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": ""
}