vue-scheduler-lite/dist/static/js/app.f4cbd6c85f6452e0455d.js

A support drag and drop scheduler on vue.js

webpackJsonp([1],{GVBu:function(t,e){},NHnr:function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=s("7+uW");var n={name:"vue-scheduler-lite",components:{"unit-div":{props:{rowIndex:Number,keyIndex:Number,width:String,rowData:Object,isBusiness:Boolean,isSelecting:Boolean,isSelectingRowIndex:Number},data:function(){return{}},methods:{mousedown(){if(!this.isBusiness)return!1;this.$emit("mouse-down",this.rowIndex,this.keyIndex)},mouseenter(){if(!this.isSelecting||this.rowIndex!=this.isSelectingRowIndex||!this.isBusiness)return!1;this.$emit("mouse-enter",this.keyIndex)},mouseup(){this.$emit("mouse-up")},setDragenterRowAndIndex(){if(!this.isBusiness)return!1;this.$emit("set-dragenter-row-and-index",this.rowIndex,this.keyIndex)}},template:'\n        <div \n          :class="[\'tl\', isBusiness ? \'can-res\' : \'cant-res\']"\n          :style="{width: width}"\n          @mousedown="mousedown"\n          @mouseenter="mouseenter"\n          @mouseup="mouseup"\n          @dragenter="setDragenterRowAndIndex"\n        >\n        </div>\n    '},"reserved-div":{props:{rowIndex:Number,keyNo:Number,unitWidth:Number,unitHeight:Number,titleDivWidth:Number,borderWidth:Number,startText:String,endText:String,contentText:String,minDate:String,maxDate:String,unit:Number,clearSwitch:Boolean,dragenterRowIndex:Number,dragenterKeyIndex:Number,isSelecting:Boolean,isSelectingRowIndex:Number,isSelectingIndex:Number},data:function(){return{styleObject:{Opacity:1,left:"0px",width:"0px",height:"130px"},isShow:!1,mouseXStarted:null,startLineNo:null,endLineNo:null,isMe:!1,isEdit:!1,isMove:!1}},created(){new Date(this.startText)-new Date(this.minDate)<0&&new Date(this.endText)-new Date(this.minDate)<0||(this.setLeftPosition(),this.setWidth(),this.isShow=!0)},watch:{startText(t,e){t!=e&&(this.startDate=t,this.setLeftPosition())},endText(t,e){if(t!=e&&(this.endDate=t,this.setWidth(),this.isSelecting&&this.mouseXStarted&&this.rowIndex==this.isSelectingRowIndex&&this.keyNo==this.isSelectingIndex)){let s=this.getMinutesDiff(new Date(e),new Date(t)),i=parseInt(s/this.unit);this.mouseXStarted+=this.unitWidth*i}},dragenterKeyIndex(t,e){t!=e&&this.dragenterRowIndex==this.rowIndex&&this.isEdit&&this.editting()},clearSwitch(t,e){t!=e&&this.editEnd()}},methods:{setLeftPosition(){let t=this.getMinutesDiff(new Date(this.minDate),new Date(this.startText)),e=parseInt(t/this.unit);this.startLineNo=e;let s=this.unitWidth*e+e*this.borderWidth;this.styleObject.left=s+"px"},setWidth(){let t=this.getMinutesDiff(new Date(this.startText),new Date(this.endText)),e=parseInt(t/this.unit);this.endLineNo=this.startLineNo+e;let s=this.unitWidth*e+e*this.borderWidth;this.styleObject.width=s+"px"},editStart(t){this.isSelecting?t.preventDefault():(this.isEdit=!0,this.mouseXStarted=t.clientX,this.styleObject.Opacity=.5)},editting(t){if(this.isSelecting)t.preventDefault();else if(this.isEdit)if(t){let e=t.x+t.layerX;if(this.mouseXStarted>e)return void(this.mouseXStarted=e);let s=t.clientX-this.mouseXStarted,i=parseInt(s/this.unitWidth);0!=i&&(this.mouseXStarted=t.clientX,this.$emit("edit-schedule-data",this.rowIndex,this.keyNo,i))}else if(this.dragenterKeyIndex>this.startLineNo){this.mouseXStarted+=this.unitWidth;let t=parseInt(this.dragenterKeyIndex-this.endLineNo);this.$emit("edit-schedule-data",this.rowIndex,this.keyNo,t)}},editEnd(){this.isEdit&&this.$emit("edit-event",this.startText,this.endText),this.isEdit=!1,this.styleObject.Opacity=1,this.mouseXStarted=null},moveStart(t){this.isSelecting?t.preventDefault():this.isEdit||(this.styleObject.Opacity=.5,this.isMove=!0,this.mouseXStarted=t.clientX,this.$emit("set-dragenter-row-and-index",this.rowIndex,null))},moveEnd(t){let e=t.clientX;if(this.isMove&&(e!=this.mouseXStarted||this.dragenterRowIndex!=this.rowIndex)){let t=e-this.mouseXStarted,s=parseInt(t/this.unitWidth),i=parseInt(this.unitWidth/2),n=parseInt(t%this.unitWidth);t<0&&Math.abs(n)>=i&&s--,this.mouseXStarted=null,0==s&&this.dragenterRowIndex==this.rowIndex||this.$emit("move-schedule-data",this.rowIndex,this.keyNo,s)}this.isEdit=!1,this.isMove=!1,this.styleObject.Opacity=1},deleteEvent(){this.$emit("delete-schedule-data",this.rowIndex,this.keyNo)},mousemove(t){if(this.rowIndex==this.isSelectingRowIndex&&this.keyNo==this.isSelectingIndex){if(this.isSelecting&&this.mouseXStarted){let e=t.clientX-this.mouseXStarted,s=parseInt(e/this.unitWidth);0!=s&&s<0&&(this.mouseXStarted=t.clientX+this.unitWidth,this.$emit("edit-schedule-data",this.rowIndex,this.keyNo,s))}this.isSelecting&&!this.mouseXStarted&&(this.mouseXStarted=t.clientX,this.styleObject.Opacity=.5)}},mouseup(){this.$emit("mouse-up",this.startText,this.endText)},getMinutesDiff(t,e){const s=e-t;return Math.ceil(s/6e4)}},template:'\n        <div \n          v-if="isShow"\n          :class="[\'sc-bar\', isMe ? \'isMe\' : \'notMe\']"\n          :style="styleObject"\n          :draggable="\'true\'"\n          @dragstart="moveStart"\n          @dragend="moveEnd"\n          @dragover="editting($event)"\n          @mouseup="mouseup"\n          @mousemove="mousemove"\n          @click="$emit(\'click-event\')"\n        >\n          <span style="float: right; padding: 5px" @click="deleteEvent">✖</span><span class="head">\n              <span class="startTime time">{{ startText }}</span>～<span class="endTime time">{{ endText }}</span>\n          </span>\n          <span class="text">{{ contentText }}</span>\n          <div\n            class="resizable-e"\n            :draggable="\'true\'"\n            @dragstart="editStart"\n            @dragend="editEnd"\n          ></div>\n        </div>\n    '}},props:{scheduleData:Array,setting:Object},data:()=>({settingData:{startDate:"2020/04/20",endDate:"2020/04/26",weekdayText:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],unit:60,borderW:1,dateDivH:25,timeDivH:25,unitDivW:25,titleDivW:200,rowH:135},padding:0,timeDivW:0,dateDivW:0,contentH:0,contentW:0,dateCnt:0,unitCnt:0,isSelecting:!1,isSelectingRowIndex:null,isSelectingIndex:null,dragenterRowIndex:null,dragenterKeyIndex:null,clearSwitch:!1}),created(){this.settingData=Object.assign(this.settingData,this.setting),this.dateCnt=this.getDateDiff(new Date(this.settingData.startDate),new Date(this.settingData.endDate))+1;let t=parseInt(1440/this.settingData.unit);this.unitCnt=t*this.dateCnt,this.padding=this.settingData.dateDivH+this.settingData.timeDivH+4*this.settingData.borderW,this.dateDivW=this.settingData.unitDivW*t+(t-this.settingData.borderW),this.contentH=this.padding+(this.settingData.rowH+2*this.settingData.borderW)*this.scheduleData.length,this.contentW=this.dateDivW*this.dateCnt+this.dateCnt*this.settingData.borderW,this.timeDivW=60/this.settingData.unit*(this.settingData.unitDivW+this.settingData.borderW)-1},methods:{setDragenterRow(t){this.dragenterRowIndex=t},setDragenterRowAndIndex(t,e){this.dragenterRowIndex=t,this.dragenterKeyIndex=e},disableDragendAnimation(t){t.preventDefault()},getHeaderDate(t){let e=this.addDays(new Date(this.settingData.startDate),t);return this.dateFormatter(e,!0)},getHeaderTime:t=>t%24,getDateDiff(t,e){const s=Math.abs(e-t);return Math.ceil(s/864e5)},dateFormatter(t,e){let s=t.getFullYear(),i=t.getMonth()+1;i<10&&(i="0"+i);let n=t.getDate();if(e){let e=t.getDay();return s+"/"+i+"/"+n+"("+this.settingData.weekdayText[e]+")"}return s+"/"+i+"/"+n},datetimeFormatter(t){let e=t.getFullYear(),s=t.getMonth()+1;s<10&&(s="0"+s);let i=t.getDate(),n=t.getHours();n<10&&(n="0"+n);let a=t.getMinutes();return a<10&&(a="0"+a),e+"/"+s+"/"+i+" "+n+":"+a},addDays:(t,e)=>(t.setTime(t.getTime()+60*e*60*24*1e3),t),addMinutes:(t,e)=>(t.setTime(t.getTime()+60*e*1e3),t),isBusiness:function(t,e){let s=new Date(this.settingData.startDate),i=parseInt(1440/this.settingData.unit),n=this.addDays(s,parseInt(e/i));if(this.scheduleData[t].noBusinessDate.indexOf(this.dateFormatter(n))>=0)return!1;let a=n.getDay(),d=this.scheduleData[t].businessHours[a];if("00:00"==d.start&&"24:00"==d.end)return!0;let r=d.start.replace(":",""),o=d.end.replace(":",""),l=e%i*this.settingData.unit,h=parseInt(l/60);h<10&&(h="0"+h);let c=parseInt(l%60);c<10&&(c="0"+c);let u=h+""+c;return u>=r&&u<o},isBusinessOnRange(t,e,s){let i=this.getMinutesDiff(new Date(this.settingData.startDate),new Date(e)),n=parseInt(i/this.settingData.unit),a=this.getMinutesDiff(new Date(this.settingData.startDate),new Date(s)),d=parseInt(a/this.settingData.unit),r=!0;for(var o=n;o<d;o++)this.isBusiness(t,o)||(r=!1);return r},hasOtherEvent(t,e,s,i,n){for(var a=0;a<this.scheduleData[s].schedule.length;a++)if(a!=t||e!=s){let t=this.scheduleData[s].schedule[a];if(new Date(t.start)-new Date(i)>=0&&new Date(t.end)-new Date(n)<=0)return!0;if(new Date(t.start)-new Date(i)>=0&&new Date(t.start)-new Date(n)<0)return!0;if(new Date(t.start)-new Date(i)<=0&&new Date(t.end)-new Date(i)>0)return!0}return!1},selectStartTime(t,e){this.isSelecting=!0,this.isSelectingRowIndex=t;let s=(e-1)*this.settingData.unit,i=e*this.settingData.unit,n=this.addMinutes(new Date(this.settingData.startDate),s),a=this.addMinutes(new Date(this.settingData.startDate),i);this.scheduleData[t].schedule.push({text:"New",start:this.datetimeFormatter(n),end:this.datetimeFormatter(a)}),this.isSelectingIndex=this.scheduleData[this.isSelectingRowIndex].schedule.length-1},adjustTimeRange(t){let e=this.scheduleData[this.isSelectingRowIndex].schedule.length-1,s=this.scheduleData[this.isSelectingRowIndex].schedule[e];if(s){let i=t*this.settingData.unit,n=this.addMinutes(new Date(this.settingData.startDate),i),a=this.datetimeFormatter(n),d=!0;this.hasOtherEvent(e,this.isSelectingRowIndex,this.isSelectingRowIndex,s.start,a)&&(d=!1),d&&(d=this.isBusinessOnRange(this.isSelectingRowIndex,s.start,a)),d&&(s.end=a)}},selectEndTime(t,e){if(this.isSelecting){if(void 0==t){let s=this.scheduleData[this.isSelectingRowIndex].schedule[this.scheduleData[this.isSelectingRowIndex].schedule.length-1];t=s.start,e=s.end}this.$emit("add-event",this.isSelectingRowIndex,t,e)}this.isSelecting=!1,this.isSelectingRowIndex=null,this.isSelectingIndex=null,this.clearSwitch=!this.clearSwitch},moveScheduleData(t,e,s){let i=this.scheduleData[t].schedule[e];if(i){let n=0,a=!0,d=!1,r=t=>{let e=s*this.settingData.unit,i=new Date(t),n=this.addMinutes(i,e);return this.datetimeFormatter(n)},o=r(i.start),l=r(i.end);if(0!=s&&(this.hasOtherEvent(e,t,this.dragenterRowIndex,o,l)?n=2:((a=this.isBusinessOnRange(this.dragenterRowIndex,o,l))&&(i.start=o,i.end=l,n=1),d=!0)),t!=this.dragenterRowIndex&&this.scheduleData[this.dragenterRowIndex]){if(d&&!a)return void this.$emit("move-event",n);if(!d&&a){if(this.hasOtherEvent(e,t,this.dragenterRowIndex,o,l))return n=2,void this.$emit("move-event",n);a=this.isBusinessOnRange(this.dragenterRowIndex,i.start,i.end),d=!0}d&&a&&(this.scheduleData[this.dragenterRowIndex].schedule.push(i),this.scheduleData[t].schedule.splice(e,1),n=1)}this.$emit("move-event",n,i.start,i.end)}},editScheduleData(t,e,s){let i=this.scheduleData[t].schedule[e];if(i){let n=(t=>{let e=s*this.settingData.unit,i=new Date(t),n=this.addMinutes(i,e);return this.datetimeFormatter(n)})(i.end);if(this.hasOtherEvent(e,t,t,i.start,n))return;i.end=n}},deleteScheduleData(t,e){this.scheduleData[t].schedule.splice(e,1),this.$emit("delete-event",t,e)},getMinutesDiff(t,e){const s=Math.abs(e-t);return Math.ceil(s/6e4)}}},a={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"schedule",on:{dragover:t.disableDragendAnimation}},[s("div",[s("div",{staticClass:"sc-rows",style:{width:t.settingData.titleDivW+"%",height:t.contentH+"px"}},[s("div",{staticClass:"sc-rows-scroll",style:{width:"100%"}},t._l(t.scheduleData,function(e,i){return s("div",{key:i,class:"timeline title",style:{height:t.settingData.rowH+"px","padding-top":0==i?t.padding+"px":"0px"},on:{click:function(s){return t.$emit("row-click-event",i,e.title)}}},[s("span",{staticStyle:{cursor:"pointer"}},[t._v(t._s(e.title))])])}),0)]),t._v(" "),s("div",{staticClass:"sc-main-box",style:{width:100-t.settingData.titleDivW+"%"}},[s("div",{staticClass:"sc-main-scroll",style:{width:t.contentW+"px"}},[s("div",{staticClass:"sc-main"},[s("div",{staticClass:"timeline",style:{height:t.settingData.dateDivH+"px",background:"black"}},t._l(t.dateCnt,function(e){return s("div",{key:e,staticClass:"sc-time",style:{width:t.dateDivW+"px",cursor:"pointer"},on:{click:function(s){t.$emit("date-click-event",t.getHeaderDate(e-1))}}},[t._v(t._s(t.getHeaderDate(e-1)))])}),0),t._v(" "),s("div",{staticClass:"timeline",style:{height:t.settingData.timeDivH+"px",background:"#6187AE"}},t._l(24*t.dateCnt,function(e){return s("div",{key:e,staticClass:"sc-time",style:{width:t.timeDivW+"px"}},[t._v(t._s(t.getHeaderTime(e-1)))])}),0),t._v(" "),t._l(t.scheduleData,function(e,i){return s("div",{key:i,class:"timeline",style:{height:t.settingData.rowH+"px"},on:{dragenter:function(e){return t.setDragenterRow(i)}}},[t._l(t.unitCnt,function(n){return s("unit-div",{key:"unit"+n,attrs:{"row-index":i,"key-index":n,"row-data":e,"is-business":t.isBusiness(i,n-1),"is-selecting":t.isSelecting,"is-selecting-row-index":t.isSelectingRowIndex,width:t.settingData.unitDivW+"px"},on:{"mouse-down":t.selectStartTime,"mouse-enter":t.adjustTimeRange,"mouse-up":t.selectEndTime,"set-dragenter-row-and-index":t.setDragenterRowAndIndex}})}),t._v(" "),t._l(e.schedule,function(e,n){return s("reserved-div",{key:"res"+n,attrs:{"schedule-detail":e,"row-index":i,"key-no":n,"start-text":e.start,"end-text":e.end,"content-text":e.text,"unit-width":t.settingData.unitDivW,"unit-height":t.settingData.rowH,"title-div-width":t.settingData.titleDivW,"border-width":t.settingData.borderW,"min-date":t.settingData.startDate,"max-date":t.settingData.endDate,unit:t.settingData.unit,"clear-switch":t.clearSwitch,"dragenter-row-index":t.dragenterRowIndex,"dragenter-key-index":t.dragenterKeyIndex,"is-selecting":t.isSelecting,"is-selecting-row-index":t.isSelectingRowIndex,"is-selecting-index":t.isSelectingIndex},on:{"set-dragenter-row-and-index":t.setDragenterRowAndIndex,"move-schedule-data":t.moveScheduleData,"edit-schedule-data":t.editScheduleData,"delete-schedule-data":t.deleteScheduleData,"mouse-up":t.selectEndTime,"move-event":function(e){return t.$emit("move-event")},"edit-event":function(s){return t.$emit("edit-event",e.start,e.end)},"click-event":function(s){return t.$emit("click-event",e.start,e.end,e.text,e.data)}}})})],2)})],2)])]),t._v(" "),s("br",{staticClass:"clear"})])])},staticRenderFns:[]};const d=[{title:"Room１",noBusinessDate:["2020/04/20"],businessHours:[{start:"00:00",end:"24:00"},{start:"00:00",end:"24:00"},{start:"00:00",end:"24:00"},{start:"00:00",end:"24:00"},{start:"00:00",end:"24:00"},{start:"00:00",end:"24:00"},{start:"00:00",end:"24:00"}],schedule:[{text:"Mr.A reserved",start:"2020/04/21 06:00",end:"2020/04/22 01:00",data:{something:"something"}},{text:"Mr.B reserved",start:"2020/04/22 06:00",end:"2020/04/22 12:00",data:{something:"something"}}]},{title:"Room２",noBusinessDate:[],businessHours:[{start:"10:00",end:"17:00"},{start:"10:00",end:"17:00"},{start:"10:00",end:"17:00"},{start:"10:00",end:"17:00"},{start:"10:00",end:"17:00"},{start:"10:00",end:"17:00"},{start:"10:00",end:"17:00"}],schedule:[{text:"Mr.C reserved",start:"2020/04/20 12:00",end:"2020/04/20 17:00",data:{something:"something"}}]},{title:"Room３",noBusinessDate:[],businessHours:[{start:"00:00",end:"24:00"},{start:"00:00",end:"24:00"},{start:"00:00",end:"24:00"},{start:"00:00",end:"24:00"},{start:"00:00",end:"24:00"},{start:"00:00",end:"24:00"},{start:"00:00",end:"24:00"}],schedule:[{text:"Mr.D reserved",start:"2020/04/20 12:00",end:"2020/04/20 18:00",data:{something:"something"}}]}],r={startDate:"2020/04/20",endDate:"2020/04/26",weekdayText:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],unit:60,borderW:1,dateDivH:25,timeDivH:25,unitDivW:25,titleDivW:20,rowH:135};var o={name:"App",components:{sc:s("VU/8")(n,a,!1,function(t){s("GVBu")},"data-v-b41f950e",null).exports},data:function(){return{scData:d,setting:r}},methods:{dateClickEvent(t){console.log("------"),console.log("DateClickEvent:"),console.log("Date:"+t)},rowClickEvent(t,e){console.log("------"),console.log("RowClickEvent:"),console.log("RowIndex:"+t),console.log("RowTitle:"+e)},clickEvent(t,e,s,i){console.log("------"),console.log("ClickEvent:"),console.log("StartDate:"+t),console.log("EndDate:"+e),console.log("ContentText:"+s),i&&(console.log("OtherData:"),console.log(i))},addEvent(t,e,s){console.log("------"),console.log("AddEvent:"),console.log("RowIndex:"+t),console.log("StartDate:"+e),console.log("EndDate:"+s)},moveEvent(t,e,s){console.log("------"),console.log("MoveEvent:"),1==t?(console.log("NewStartDate:"+e),console.log("NewEndDate:"+s)):2==t?console.log("Has other event, can't move."):console.log("Not businessDay, can't move.")},editEvent(t,e){console.log("------"),console.log("EditEvent:"),console.log("NewStartDate:"+t),console.log("NewEndDate:"+e)},deleteEvent(t,e){console.log("------"),console.log("DeleteEvent:"),console.log("Row:"+t),console.log("Index:"+e)},addNewRow(){let t="Room"+(this.scData.length+1);this.scData.push({title:t,noBusinessDate:[],businessHours:[{start:"00:00",end:"24:00"},{start:"00:00",end:"24:00"},{start:"00:00",end:"24:00"},{start:"00:00",end:"24:00"},{start:"00:00",end:"24:00"},{start:"00:00",end:"24:00"},{start:"00:00",end:"24:00"}],schedule:[]})}}},l={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{attrs:{id:"app"}},[s("div",[s("input",{attrs:{type:"button",value:"Add new row"},on:{click:t.addNewRow}})]),t._v(" "),s("sc",{attrs:{"schedule-data":t.scData,setting:t.setting},on:{"row-click-event":t.rowClickEvent,"date-click-event":t.dateClickEvent,"click-event":t.clickEvent,"add-event":t.addEvent,"move-event":t.moveEvent,"edit-event":t.editEvent,"delete-event":t.deleteEvent}}),t._v(" "),t._m(0)],1)},staticRenderFns:[function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticStyle:{display:"flex"}},[s("span",[t._v("Guide:")]),t._v(" "),s("div",{staticClass:"sample"}),t._v(" "),s("span",[t._v("Normal")]),t._v(" "),s("div",{staticClass:"sample cant-res"}),t._v(" "),s("span",[t._v("Not BusinessDay")]),t._v(" "),s("div",{staticClass:"sample reserved"}),t._v(" "),s("span",[t._v("Reserved")])])}]};var h=s("VU/8")(o,l,!1,function(t){s("uWUq")},null,null).exports;i.a.config.productionTip=!1,new i.a({el:"#app",components:{App:h},template:"<App/>"})},uWUq:function(t,e){}},["NHnr"]);
//# sourceMappingURL=app.f4cbd6c85f6452e0455d.js.map