上海网站设游戏推广员拉人技巧

fullCalendar日程表在Vue项目中的应用

fullCalendar相关API

使用fullCalendar插件在项目中实现日程排版，支持天、月日程转换，自定义事件

页面布局

通过按钮切换天与月视图的转换，天视图回显具体的时分排版项目，月视图回显缩略信息

<div class="order-day-calendar h-100 clearfix"><div id='calendar' class="h-100" @contextmenu.prevent.stop="stop_default"></div><!-- 右键单击预约信息 --><right-menu ref="menu" :eventsource="menutop"><div slot="list"><p v-if="!isCurrentDate" @click="arriveModel('arrive')"><i class="iconfont icon-jinrudianpu"></i> 进店登记</p><p @click="lookOrderModel('lookorder')"><i class="iconfont icon-leijiyuyue"></i> 预约详情</p><p v-if="!isShow" @click="showModel('edit')"><i class="iconfont icon-icon-"></i> 修改预约</p><p v-if="!isShow" @click="cancelModel('concel')"><i class="iconfont icon-shanchu"></i> 取消预约</p><p @click="lookInfoModel('lookinfo')"><i class="iconfont icon-chakan"></i> 查看档案</p></div></right-menu><!-- 右键单击可排班区域的回显 --><right-menu ref="menu2" :eventsource="menutop"><div slot="list"><p @click="addOrder()"><i class="iconfont icon-zengjia"></i> 新增预约</p></div></right-menu><!-- 鼠标滑过预约信息 --><div ref="menu3" v-show="isshowpopover" class="tootips" :style="{top:menulocation.y + 'px',left:menulocation.x + 'px'}"><look-order-info :msg="look_msg" :labelWidth="'95px'"></look-order-info></div><!-- 详情信息组件 --><ele-close-order ref="closeorder" :info="item"></ele-close-order>
</div>

挂在日程组件

日程组件生成需要在dom挂载完毕之后进行，由于calendar是有jq实现的，所以项目需要配置jq的引用；

export default {name: 'calendar',data () {return {// 组件变量数据}}mounted(){// 初始化日程this.InitCalendar()},methods:{// 业务逻辑}
}

模拟数据

export default {name: 'calendar',data () {return {// 预约人orderlists:[{emp_adviser: '55',emp_advisername:'张三',status: '1',name: '张病人',bind_phone: '0101451213',date: '2022-04-30',start_time: '08:30',end_time: '11:30',e_serve: '常规检查'},{emp_adviser: '56',emp_advisername:'李四',status: '2',name: '张病人',bind_phone: '010-12154512',date: '2022-04-30',start_time: '14:30',end_time: '15:30',e_serve: '二次复查检查'},{emp_adviser: '57',emp_advisername:'王二',status: '3',name: '张病人',bind_phone: '010-12154512',date: '2022-04-30',start_time: '14:30',end_time: '15:30',e_serve: '一般检查'},{emp_adviser: '57',emp_advisername:'王二',status: '4',name: '李二狗',bind_phone: '124721847238',date: '2022-04-30',start_time: '11:30',end_time: '12:30',e_serve: '内科检查'},{emp_adviser: '56',emp_advisername:'李四',status: '2',name: '王砖头',bind_phone: '4512441',date: '2022-04-29',start_time: '11:30',end_time: '12:30',e_serve: '内科检查'}],// 值班人员allWorkTime:[{date: '2022-04-30',empid: '55',empname: '张三',day: '1'},{date: '2022-04-30',empid: '56',empname: '李四',day: '2'},{date: '2022-04-30',empid: '57',empname: '王二',day: '3'}],}}mounted(){// 初始化日程this.InitCalendar()},methods:{InitCalendar(){if(this.radio === 'day'){this.InitDayCalendar('agendaDay',{resources: this.getResources()});//由月切换到天，默认显示选择月的天$('#calendar').fullCalendar('gotoDate',this.currentTime);} else if (this.radio === 'month'){this.InitDayCalendar('month',{})}},// 生成成日表InitDayCalendar(type,object){const self = this;$('#calendar').fullCalendar( 'destroy' )const options = MyCalendar.options(type,500);$('#calendar').fullCalendar(Object.assign(options,object,{eventSources:MyCalendar.eventSources(self.orderlists,self.has_look_contact_auth),// 自定义事件逻辑}));// 重新计算日程表的高度this.getCalendarHeight();},// 计算日程表的高度getCalendarHeight(){try {this.timer_g ? clearTimeout(this.timer_g) : '' ;this.timer_g = setTimeout(() => {let in_h = $('#calendar').height();// console.log(in_h);$('#calendar').fullCalendar('option', 'height', (in_h - 10));}, 100);} catch (error) {myAlert('获取日程表高度失败！')}},}
}

实现工具函数

// MyCalendar.js
export default {filter: function (options) {let { list, rest, temptime, id, other,orderlist} = options;// 获取门店idconst store_id = '55';// 先检测是否休店for (let i = 0; i < rest.length; i++) {const ele = rest[i];if (ele.storeid == store_id && ele.date == temptime){return [{ id: '休店', title: '今日休店', day: '4'}]}}// 检测是预约列表中是否存在已被预约，但未排班的员工let get_c_time_adivers = orderlist.filter(item => item.date == temptime);// let get_c_time_adivers = [{ emp_adviser: '55', emp_advisername:'测试用的'}];// 不休店，则获取分类const arr = []list.forEach(item => {if (item.date == temptime) {// 检查是否存在已预约未排班的员工get_c_time_adivers = get_c_time_adivers.filter(order => order.emp_adviser != item.empid);other ? arr.push({ id: +item.empid, title: item.empname, day: item.day }) : arr.push(item);}});get_c_time_adivers.forEach(item => {other ? arr.push({ id: +item.emp_adviser, title: item.emp_advisername, day: '6' }) : '';});// console.log(get_c_time_adivers);// 合并排班for (let i = arr.length - 1; i >= 0; i--) {const item = arr[i];for (let j = i - 1; j >= 0; j--) {const ele = arr[j];if (ele[id] === item[id]) {ele.day = '3';arr.splice(i, 1);}}}if(arr.length === 0){return [{ id: '未排班', title: '今日未排班', day: '5' }]}return arr},// 参数options: function (type = 'agendaDay', height = 755){return {defaultView: type,groupByResource: true,header: false,height: height,aspectRatio: 2,allDayText: "未处理",            //自定义全天视图的名称slotDuration: "00:30:00",      //一格时间槽代表多长时间，默认00:30:00（30分钟）slotLabelFormat: "H:mm",    //日期视图左边那一列显示的每一格日期时间格式slotLabelInterval: "00:30:00",listDayFormat: false,listDayAltFormat: false,nowIndicator: true,minTime: '08:00:00',maxTime: '18:30:00',displayEventTime: false,firstDay: 1,editable: false,timeFormat: 'H:mm',axisFormat: 'H:mm',}},// 事件源eventSources: function (list, hasContactAuth){// 事件对象function getEvents(type) {const arr = [];list.forEach(item => {if (item.status == type) {// console.log(item);const time = item.date.split('-'),start_time = item.start_time.split(':'),end_time = item.end_time.split(':');let phone = hasContactAuth ? util.getCustomerPhone(item) : util.contact_replace(util.getCustomerPhone(item));let obj = {id: item.id,title: `<div class="clearfix word-task"><ul class="clearfix"><li>${item.name || item.c_name} <span>${phone}</span></li><li><em>服 务：</em>${item.e_serve || item.serve || '' }</li><li><em>时 间：</em>${item.date} ${item.start_time} - ${item.end_time}</li></ul></div>`,resourceId: +item.emp_adviser || +item.adviser,className: 'status status' + type + '-inner',data: item};if (item.start_time) {obj = Object.assign(obj, {start: new Date(time[0], time[1] - 1, time[2], start_time[0], start_time[1]),end: new Date(time[0], time[1] - 1, time[2], end_time[0], end_time[1]),allDay: false,})} else {obj = Object.assign(obj, {start: new Date(item.date),end: new Date(item.date),allDay: true,})}arr.push(obj)}});return arr;};const arr = [{events: getEvents(1),backgroundColor: '#0039fe',color: 'black',textColor: '#333',borderColor: "#f39c12"},{events: getEvents(2),textColor: '#333',backgroundColor: 'green',},{events: getEvents(3),backgroundColor: '#0039fe',textColor: '#333',borderColor: "#f39c12"},{events: getEvents(4),textColor: '#333',backgroundColor: '#ccc',},{events: getEvents(5),textColor: '#333',backgroundColor: '#ccc',}];return arr}
}

效果如下，默认视图为日视图

切换月视图如下：

自定义方法及事件

在初始化方法中的配置项中增加以下代码，配置自定义事件回调

dayClick : function( date, e, jsEvent, view ) {// console.log(date, view);if(!view) return false;const clickTime = new Date(date.format()).getHours();if(view.day == '1' && +clickTime > 11){tipsMsg(self, 'warning', '只能在上午排班！');return false} else if (view.day == '2' && +clickTime < 12){tipsMsg(self, 'warning', '只能在下午排班！');return false} else if(view.day == '4'){tipsMsg(self, 'error', '今日休店！');return false} else if(view.day == '5'){tipsMsg(self, 'error', '今日未排班！');return false} else if(view.day == '6'){tipsMsg(self, 'error', '预约权限已禁止！');return false}const target_ele = e.target;// const clickMiunt = new Date(date.format()).getMinutes() === 30 ? '30' : '00';// console.log(clickTime,clickMiunt);// 显示右键菜单self._showMenu(e,'menu2',{date:util.dateToggle('-','-','',date.format()),emp_adviser:view.id});
},
eventRender: function (event, element) {element.html(event.title);
},
eventClick : function(data, e, event){const temp_data = data.data;// console.log(temp_data);if(temp_data.status == '5' || temp_data.status == '4'){tipsMsg(self, 'error', '该预约已取消！');return false ;}self._showMenu(e,'menu',temp_data);
},
eventMouseover:function(data, e, event){console.log(data.data);self.look_msg = data.data;this.onmousemove = function(e){self.too_Tips(e);}
},
eventMouseout:function(data, e, event){self.outtootips();
},

methods中增加剩余逻辑代码

methods: {stop_default(){// 阻止默认事件},_showMenu(e,menu,item){this.item = item;this.menutop = e;this.$refs[menu].isShowMenu = true;this.isshowpopover = false;},showModel(e){// console.log(this.item);const obj = {isnew:false,orderInfo:this.item,title:'修改预约','weixin':true,'datelock':false,'url':'updatereservation',from:'day'}// 业务逻辑},arriveModel(arrive){Event.$emit('comeIn',Object.assign({},this.item,{isnew:false}));},cancelModel(concel){//取消预约this.$refs.closeorder.dialogVisible = true;},lookOrderModel(){//查看预约信息// 业务逻辑},lookInfoModel(){//查看档案// 业务逻辑},addOrder(){// console.log(this.item);const obj = {isnew:true,orderInfo:this.item,title:'新增预约','datelock':false,from:'day'}// Event.$emit('editOrder',obj);tipsMsg(this, 'success', '新增预约成功');},intootips(){clearInterval(this.timer);this.timer = setTimeout(() => {this.isshowpopover = true;}, 100);},outtootips(){clearInterval(this.timer);this.timer = setTimeout(() => {this.isshowpopover = false;}, 100);},// 获取tootiptoo_Tips(e){clearInterval(this.timer);this.isshowpopover = true;//获取tootip 父元素居body顶部与左侧的距离let ele_div = document.getElementsByClassName('order-day-calendar')[0];// 获取父级元素的滚动条let warp_ele = document.getElementsByClassName('my-data')[0];const p = util.getElePoint(ele_div);const e_current = e.currentTargetconst c = util.getElePoint(e_current);// 设置tootip的定位this.$nextTick(() => {let ele = this.$refs.menu3,dom_Width = ele.clientWidth,dom_Height = ele.clientHeight,dom_w = e_current.clientWidth,dom_h = e_current.clientHeight,client_W = document.body.clientWidth,client_H = document.body.clientHeight,dom_clientX = e.clientX,dom_clientY = e.clientY;let scroll = warp_ele.scrollTop;// 滚动条的高度let location = {y:dom_clientY - p.t + scroll ,x:dom_clientX - p.l + 20};if(dom_clientY + dom_Height > client_H){//如果菜单的高度 + 菜单距浏览器顶部的高度，大于浏览器视口高度location.y = location.y - dom_Height - dom_h/2;}if(dom_clientX + dom_Width > client_W - 50){location.x = location.x - dom_Width - 40;}this.menulocation = location;client_W = null;client_H = null;ele_div = null;warp_ele = null;});}
}

销毁日程

组件卸载时，需要销毁日程实例

beforeDestory(){this.$refs = {};$('#calendar').fullCalendar( 'destroy' )
}