为用户提供周日历日程表设计,用户可通过自由拖动选区建立日程事件。
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"
/>
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
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 |
事件名 | 说明 | 返回值 |
---|---|---|
on-selected | 拖动选取时间段单元格完成时触发 | object ,选中的资源对象,内容包括时间段和日期等 |
on-contextmenu | 日程记录右击事件 | row ,record ,event |
on-error | 日程表格错误反馈 | msg |
事件名 | 说明 | 参数 |
---|---|---|
cancelSelect | 清除当前选择 | 无 |
名称 | 说明 | 属性 |
---|---|---|
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 内的一项
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
id | 日程记录主键 | String | - |
date | 日程日期,YY/MM/DD | String | - |
start_time | 日程开始时间点,hh:mm | String | - |
end_time | 日程结束时间点,hh:mm | String | - |
content | 日程内容 | String | - |
设置不可选择的时间段,参数为当前时间段
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": ""
}