README
draggable-schedule
基于Vue的日程排班表
安装
npm install draggable-schedule
使用
<draggable-schedule
:yAxis="platform"
:eventArr="eventArr"
:originData="originData"
@change="handleChange"
startDateTime="2020-02-11 08:00"
endDateTime="2020-02-11 22:00"
>
</draggable-schedule>
datas数据格式
const scheduleData = {
'星期一': [
{
id: 1,
platId: 1,
startTime: '2020-02-11 10:00',
endTime: '2020-02-11 12:00',
eventName: '起床,早餐',
type: 0,
},
],
...
}
yAxis数据格式
yAxis: [
{
name: '星期一',
type: 0,
id: 1,
},
{
name: '星期二',
type: 1,
id: 2,
},
{
name: '星期三',
type: 2,
id: 3,
},
{
name: '星期四',
type: 1,
id: 4,
},
{
name: '星期五',
type: 2,
id: 5,
},
{
name: '星期六',
type: 2,
id: 7,
},
{
name: '星期天',
type: 2,
id: 8,
},
];
eventArr数据格式
const eventArr = [
{
id: 1,
startTime: '2020-02-11 10:00',
endTime: '2020-02-11 12:00',
eventName: '起床,早餐',
type: 0,
},
{
id: 8,
startTime: '2020-02-11 10:00',
endTime: '2020-02-11 12:00',
eventName: '语文课',
type: 1,
}
]
完整示例
<template>
<div id="app">
<draggable-schedule
:yAxis="yAxis"
:eventArr="eventArr"
:originData="originData"
@change="handleChange"
startDateTime="2020-02-11 08:00"
endDateTime="2020-02-11 22:00"
>
</draggable-schedule>
</div>
</template>
<script>
import draggableSchedule from 'draggable-schedule';
export default {
components: {
draggableSchedule
},
data() {
return {
yAxis,
originData,
}
},
methods: {
change(data) {
console.log(data);
},
}
}
</script>
:yAxis="yAxis"
:eventArr="eventArr"
:originData="originData"
@change="handleChange"
startDateTime="2020-02-11 08:00"
endDateTime="2020-02-11 22:00"
参数说明
属性
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
yAxis | Array | [] | 纵坐标数据 |
eventArr | Array | [] | 自定义事件数据 |
originData | Object | [] | 原始数据 |
startDateTime | String | '2020-02-11 08:00' | 开始时间 |
endDateTime | String | '2020-02-11 23:00 | 结束时间 |
方法
名称 | 类型 | 参数 | 描述 |
---|---|---|---|
change | Function | data | 修改排版后触发 |