基于Vue的日程排班表

common-schedule

基于Vue的日程排班表，根据不同的时间显示粒度设置granularity的值，支持年/月/日/小时

安装

npm install common-schedule

实用场景

为车辆添加班线计划

实现代码

设置粒度为day

<commonSchedulestart="2019-08-01 07:00:00"end="2019-8-31 23:30:00":datas="scheduleData":width="160":height="80"granularity="day"@addHandle="addHandle"@removeHandle="removeHandle">
</commonSchedule>
// 参考数据
const scheduleData = {'川A43HU9': {xName: '川A43HU9', sche: [{start: '2019-08-2 12:30', // 开始时间end: '2019-08-5 15:30', // 结束时间eventName: '成都-上海', // },],},'渝B89UER': {xName: '渝B89UER',sche: [{start: '2019-08-5 17:30', // 开始时间end: '2019-08-6 18:30', // 结束时间eventName: '北京-西安'},],},}

定制年度目标

<commonSchedulestart="2019-01-23 07:00:00"end="2019-12-23 23:30:00":datas="scheduleData":width="160":height="80"granularity="month"@addHandle="addHandle"@removeHandle="removeHandle">
</commonSchedule>// 参考数据
const scheduleData = {'团队1': {xName: '团队1',sche: [{start: '2019-02', // 开始时间end: '2019-04', // 结束时间eventName: '目标：完成XX目标'},],},'团队2': {xName: '团队2',sche: [{start: '2019-01', // 开始时间end: '2019-03', // 结束时间eventName: '目标：完成XX目标'},],}}

定制每日计划

参考代码

设置粒度为hour

如果需要以半个小时作为分割是，设置halfSplit:true

<commonSchedulestart="2019-08-23 07:00:00"end="2019-08-23 23:30:00":datas="scheduleData":width="160":height="80":halfSplit="true"granularity="hour"@addHandle="addHandle"@removeHandle="removeHandle">
</commonSchedule>
// 参考数据
const scheduleData = {'小李': {xName: '小李',sche: [{start: '2019-8-23 07:00:00', // 开始时间end: '2019-8-23 08:00:00', // 结束时间eventName: '任务：起床洗涮', //},{start: '2019-8-23 08:00:00', // 开始时间end: '2019-8-23 08:30:00', // 结束时间eventName: '吃早餐', //},{start: '2019-8-23 08:30:00', // 开始时间end: '2019-8-23 09:00:00', // 结束时间eventName: '上班途中', //},{start: '2019-8-23 09:00:00', // 开始时间end: '2019-8-23 18:00:00', // 结束时间eventName: '上班', //},{start: '2019-8-23 18:00:00', // 开始时间end: '2019-8-23 19:00:00', // 结束时间eventName: '回家途中', //},{start: '2019-8-23 19:00:00', // 开始时间end: '2019-8-23 20:00:00', // 结束时间eventName: '吃晚餐', //},],},}

定制长线计划

参考数据格式

设置粒度为year

const scheduleData = {'团队1': {xName: '团队1',sche: [{start: '2016', // 开始时间end: '2018', // 结束时间selected: false, // 是否选中 默认false[新增/修改后需将默认设置为false]eventName: '目标：完成XX目标', //},],},'团队2': {xName: '团队2',sche: [{start: '2014', // 开始时间end: '2016', // 结束时间selected: false,eventName: '目标：完成XX目标'},],},}

使用

<commonSchedulestart="2016-8-12 12:00:00"end="2017-9-12 12:00:00":datas="scheduleData":width="180":height="80"granularity="month"@addHandle="addHandle"@removeHandle="removeHandle"></commonSchedule>

参数说明

属性

名称	类型	默认	描述
datas	Object	{}	展示数据
start	String	‘2018-8-12 12:00:00’	开始时间(必须为此格式，YYYY-MM-DD HH:mm:ss)
end	String	‘2018-12-12 12:00:00’	结束时间(必须为此格式，YYYY-MM-DD HH:mm:ss)
granularity	String	‘hour’ 可选值[‘year’,‘month’, ‘day’]	时间粒度
width	Number	200	宽度
height	Number	70	高度
halfSplit	Boolean	false	是否分半展示时间粒度[如一小时分为0-30分、30-60分]

方法

名称	类型	参数	描述
addHandle	Function	item	添加日程事件
removeHandle	Function	item	删除日程事件

slot

名称	描述
time	自定义时间线
content	自定义日程内容
x-name	自定义名称内容
detail	自定义详情

基于Vue的日程排班表 - common-schedule相关推荐

vue快速集成Fullcalendar日程排班
vue快速集成Fullcalendar日程排班官方文档地址:https://fullcalendar.io/docs/vue 1. 安装以下FullCalendar依赖 npm install -- ...
解决用vue+vant 写顶部tab栏做排班表的bug
主要的更改是解决了日期能到 31/32 的问题,实现了到月底自动切换到下一月的1号这里博主自己封了一个新的函数主要用到了 setDate()这个时间函数 //获取几天后日期dateCount( ...
FullCalendar 日历插件排班表排课表保姆级详解(可拖动排班排课)
(基于vue)实现效果文章目录前言一.FullCalendar是什么? 二.使用步骤 1.引入库 2.html部分代码 3.css样式代码(样式我单独写个scss文件引入的) 4.逻辑代码部分 ...
Jeesite引用fullcalendar实现日程排班
Jeesite引用fullcalendar实现日程排班: 备注:fullcalendar不同的jar版本,使用方式不同,此次使用的是1.6版本. 参考一:eventClick triggering - ...
php日历排班表,日历排班表软件下载
日历排班表软件app是一款掌上智能排版助手.日历排班表软件app主要为有倒班.值班需求的工作人员提供智能排班功能,您可以通过日历排班表软件app输入对应的数据,就可以精准算出自己的上班.值班时间,非常 ...
用顶部tab栏做排班表
用顶部tab栏做排班表入职快两个月了,老大要求做一个固定格式的医院预约挂号排班表,要求用 vue + vant 做.在网上搜了一下子,都很乱,不适合,一狠心就自己试着写了一个,因为技术很菜 ...
java如何实排班表时间算法_java如何实排班表时间算法
java如何实排班表时间算法 [2021-02-09 22:33:43] 简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace(" ...
基于回溯算法的排班问题求解
基于回溯算法的排班问题求解 @[TOC](基于回溯算法的排班问题求解) 前言一.排班问题抽象二.回溯算法具体实现 1.函数主体 2.列元素求和 3.回溯算法 4.回溯算法出口函数总结前言排班 ...
JS日期排班表(table表格)
JS日期排班表可以根据当前年月进行自动渲染日期,星期,实现更改年月排布(table横向排版) <table class="table table-striped table-bord ...

基于Vue的日程排班表 - common-schedule

common-schedule

安装

实用场景

为车辆添加班线计划

实现代码

定制年度目标

定制每日计划

参考代码

定制长线计划

参考数据格式

使用

参数说明

属性

方法

slot

基于Vue的日程排班表 - common-schedule相关推荐

最新文章

热门文章