基于Vue3的排班日历方案

支持用户的自定义添加，个性化管理（单节点的删除，内容添加，增加额外的交互等等）

核心代码

      /*** @Description:上个年* @Author: ShiWei* @Date: 2022-10-19*/const preYear = () =>{//todo 执行获取排班人对象filterMan()let ls     = state.days.split('-');const data = new Date();const y = data.getFullYear();//todo 下一年点击后执行年月初始话从1月开始let tep=1;if(Number(ls[0])-tep<y) returnstate.days = (Number(ls[0])-tep)+'-'+1;state.dataList= getMonthDays(Number(ls[0])-tep,1);state.dataList.map(d=>{d.yser=state.daysd.select=falsed.child=[]})handleSetMan()getHasMan();}export const   getMonthDays=(year,month)=>{let stratDate = new Date(year,month-1,1),endData = new Date(year,month,1);let days = (endData -stratDate)/(1000*60*60*24);let list=[]for (var i = 1; i <=days; i++) {const d = i > 9 ? i : '0'+i// const d = iconst date = month + '-' + dconst week =new Date(month+'/'+i+'/'+year).getDay() == 0? '星期日': new Date(month+'/'+i+'/'+year).getDay() == 1? '星期一': new Date(month+'/'+i+'/'+year).getDay() == 2? '星期二': new Date(month+'/'+i+'/'+year).getDay() == 3? '星期三': new Date(month+'/'+i+'/'+year).getDay() == 4? '星期四': new Date(month+'/'+i+'/'+year).getDay() == 5? '星期五': new Date(month+'/'+i+'/'+year).getDay() == 6? '星期六': ''list.push({date,week,d,})}return list
}

里用核心函数返回指定年月的每一天及对应的星期几组合进日历中

  /*** @Description:人员附属到具体切换的时间上* @Author: ShiWei* @Date: 2022-10-26*/const handleSetMan=()=>{if(state.selectMan.length>0){state.dataList.map(d=>{state.selectMan.map(s=>{if(d.yser===s.yser&&d.date===s.date){d.child=s.child;d.select=true}})})}}

state.dataList  作为核心的日历使用默认的选择条件均为置空

基于Vue3的排班日历方案相关推荐

vue之排班日历的实现
这里写自定义目录标题 vue之排班日历的实现 index.vue 排班日历组件 calendar.vue calendar.js vue之排班日历的实现查询日期和数据,展示对于的排班日历,蓝色为 ...
排班算法 java_【算法】基于优先级的排班算法实现
场景:在大学的里,有不少社团组织会要组织中的成员值班,当然这个值班时间是学生无课的时间才会被安排值班. 假设现有如下需求:一天中有3个时间段要有人值班,每周周一到周五都要值班,就是共有15个值班段,每 ...
vue实现考勤排班日历（备忘）
效果图代码  <template><div><div class="rili" style="width: 1 ...
java 排班日历_快速简化排班（智能排班）-日历排班
在前面的文章中,我们详细探讨了传统模式下的排班问题,流程很简单,但有些企业班别较多(比如有20个班别),而且每个班别都需要设定一个周末和假日班(这就变成了60个甚至更多班别,比如有些班别周六和周日的判 ...
java 排班日历,排班考勤表的制作也很简单，赶快来试试吧
有朋友提到说小编之前制作的考勤表很实用,能不能制作一份排班计划表?小编在这里分享一个简单的制作,如有不妥,欢迎指正! 一.设置排班表的动态标题 ①定义名称:选择月份的区域--点击公式--名称管理器-- ...
值班排班日历插件引入参考
值班代码源码
VUE fullcalendar 制作排班
1.首先在已创建好的VUE项目下用使用命令行安装好fullcalendar依赖,整行输入enter就行 VUE2: npm install --save @fullcalendar/vue @full ...
智能排班系统【管理系统功能、操作说明——下篇】
文章目录页面与功能展示排班日历月视图(按职位查询) 月视图(按员工查询) 周视图排班任务管理创建排班计算任务设置任务的排班规则设置工作日客流量导入任务计算查看任务结果发布任务任 ...
考勤软件之：考勤排班规则
虽然看完全部内容,都能理解,但还是没有找到我想要的内容. 来源:http://www.cnblogs.com/lcmxiaoya/archive/2011/12/26/2301756.html 班次在 ...

基于Vue3的排班日历方案

基于Vue3的排班日历方案

基于Vue3的排班日历方案相关推荐

最新文章

热门文章