vue-daily-scheduler/dist/vue-schedule.min.js

A Vue.js component for continuous daily scheduling

var VueSchedule=function(t){"use strict";function e(t,e,i,s,a,h,r,l,n,d){"boolean"!=typeof r&&(n=l,l=r,r=!1);var m="function"==typeof i?i.options:i;t&&t.render&&(m.render=t.render,m.staticRenderFns=t.staticRenderFns,m._compiled=!0,a&&(m.functional=!0)),s&&(m._scopeId=s);var u;if(h?(u=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,n(t)),t&&t._registeredComponents&&t._registeredComponents.add(h)},m._ssrRegister=u):e&&(u=r?function(){e.call(this,d(this.$root.$options.shadowRoot))}:function(t){e.call(this,l(t))}),u)if(m.functional){var o=m.render;m.render=function(t,e){return u.call(e),o(t,e)}}else{var c=m.beforeCreate;m.beforeCreate=c?[].concat(c,u):[u]}return i}function i(t){i.installed||(i.installed=!0,t.component("vue-schedule",s))}var s=e({render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticStyle:{position:"relative"},style:t.rootCssVar},[i("div",{staticClass:"vws-rule-custom",staticStyle:{"user-select":"none"}},[i("div",{staticClass:"vws-rule-row"},[i("div",{staticClass:"vws-table-rule"},[i("div",{staticClass:"vws-table-rule-heading"},[i("div",{staticClass:"vws-time-list vws-rule-time-time vws-time-rule opacity-0"},[t._v(t._s(t.strTime))]),t._v(" "),t.disableWeekSelect?t._e():i("div",{staticClass:"text-center week-rule"},[t._v(t._s(t.strWeek))]),t._v(" "),t._l(t.dayTable,function(e,s){return i("div",{key:s,staticClass:"text-center"},[t._v(t._s(e))])})],2),t._v(" "),i("div",{ref:"draggableArea",staticClass:"vws-table-rule-body",attrs:{id:"schelude"},on:{mousedown:t.startDrag,mousemove:t.doDrag}},[t.disableDaySelect?t._e():i("div",{key:"day",ref:"ruleTime",staticClass:"vws-rule-time"},[i("div",{ref:"ruleTimeTime",staticClass:"vws-time-list vws-rule-time-time vws-time-rule"},[t._v(t._s(t.strDay))]),t._v(" "),t.disableWeekSelect?t._e():i("div",{ref:"ruleTimeWeek",staticClass:"vws-time-list"}),t._v(" "),t._l(t.dayTable,function(e,s){return i("div",{key:s,ref:"ruleTimeItem",refInFor:!0,class:{"vws-time-list vws-rule-time-item":!0,active:t.checkFullDay(s)},on:{click:function(e){t.toggleFullDay(s,t.checkFullDay(s))}}})})],2),t._v(" "),t._l(t.timeArray,function(e,s){return i("div",{key:s,ref:"ruleTime",refInFor:!0,staticClass:"vws-rule-time"},[i("div",{ref:"ruleTimeTime",refInFor:!0,staticClass:"vws-time-list vws-rule-time-time vws-time-rule",attrs:{"data-val":e}},[t._v("\n              "+t._s(e)+"\n            ")]),t._v(" "),t.disableWeekSelect?t._e():i("div",{ref:"ruleTimeWeek",refInFor:!0,class:{"vws-time-list vws-rule-time-week":!0,active:t.checkFullWeek(s)},on:{click:function(e){t.toggleWeek(s,t.checkFullWeek(s))}}}),t._v(" "),t._l(t.dayTable,function(e,a){return i("div",{key:a,ref:"ruleTimeItem",refInFor:!0,class:{"vws-time-list vws-rule-time-item":!0,active:void 0!=t.timetable[a].find(function(t){return t==s})},on:{click:function(e){return t.toggleDay(a,s)}}},[i("span",[t._v(t._s(e))])])})],2)})],2)])])])])},staticRenderFns:[]},void 0,{props:{value:{type:Object},steps:{type:Number,default:60},bg:{type:String,default:"#223642"},bgHover:{type:String,default:"#84dafc7a"},bgActive:{type:String,default:"#84c9fc"},textColor:{type:String,default:"#000"},dayTable:{type:Array,default:["So","Mo","Tu","We","Th","Fr","Sa"],validator:t=>7==t.length},timeArray:{type:Array,default:[],validator:t=>t.length>0},strWeek:{type:String,default:"Week"},strTime:{type:String,default:"Time"},strDay:{type:String,default:"Day"},disableDaySelect:{type:Boolean,default:!1},disableWeekSelect:{type:Boolean,default:!1}},data(){return{timeArrayLength:24,timetable:{0:[],1:[],2:[],3:[],4:[],5:[],6:[]},dragValue:!1,dragging:!1,x:0,y:0,startX:0,startY:0,maxX:0,maxY:0,minX:1e6,minY:1e6,dragWeek:!1,dragDay:!1}},methods:{startDrag(t){this.dragging=!0,this.x=this.y=0,this.startX=this.startY=this.maxY=this.maxX=0,this.minY=this.minX=1e6;let e={height:this.$refs.draggableArea.clientHeight,width:this.$refs.draggableArea.clientWidth},i={height:this.$refs.ruleTimeItem[0].clientHeight,width:this.$refs.ruleTimeItem[0].clientWidth},s={height:this.$refs.ruleTimeTime[0].clientHeight,width:this.$refs.ruleTimeTime[0].clientWidth},a={height:this.disableWeekSelect?0:this.$refs.ruleTimeWeek[0].clientHeight,width:this.disableWeekSelect?0:this.$refs.ruleTimeWeek[0].clientWidth};this.data={container:e,time:s,item:i,week:a};let h=this.data.time.width+this.data.week.width+4+15,r=6;for(let e=0;e<8;e++){let i=h+e*(this.data.item.width+2);i>t.layerX&&i<t.layerX+this.data.item.width&&(r=e-1)}let l=-1,n=1;this.$refs.ruleTime.map((e,i)=>{if(!e.className.includes("hides")){let e=35+(n+(this.disableDaySelect?0:1))*(this.data.item.height+2);e>t.layerY&&e<t.layerY+this.data.item.height&&(l=i),n++}}),-1==l&&-1==r||(-1==l?(this.dragValue=!this.checkFullDay(r),this.dragWeek=!1,this.dragDay=!0):-1==r?(this.dragValue=!this.checkFullWeek(l),this.dragWeek=!0,this.dragDay=!1):(this.dragValue=-1==this.timetable[r].indexOf(l),this.dragWeek=!1,this.dragDay=!1))},stopDrag(){this.dragging=!1},doDrag(t){if(this.dragging){this.x=t.layerX,this.y=t.layerY,t.layerY>this.maxY&&(this.maxY=t.layerY),t.layerX>this.maxX&&(this.maxX=t.layerX),t.layerY<this.minY&&(this.minY=t.layerY),t.layerX<this.minX&&(this.minX=t.layerX),this.startX||(this.startX=t.layerX,this.startY=t.layerY);let e=this.data.time.width+this.data.week.width+4+15;for(let i=0;i<8;i++){let s=e+i*(this.data.item.width+2),a=!1;if(this.startX<this.x?s>this.startX&&s<t.layerX+this.data.item.width&&(a=!0):s<this.startX+this.data.item.width&&s>t.layerX&&(a=!0),this.dragDay)a&&this.setFullDay(i-1,this.dragValue);else{let t=1;this.$refs.ruleTime.map((e,h)=>{if(!e.className.includes("hides")){let e=35+(t+(this.disableDaySelect?0:1))*(this.data.item.height+2);this.startY<this.y?(e>this.startY&&e<this.y+this.data.item.height&&a&&(this.dragWeek?this.setWeek(h,this.dragValue):this.setDay(i-1,h,this.dragValue)),e>this.startY&&e<this.maxY+this.data.item.height&&(this.startX<this.x?this.x<this.maxX&&s+this.data.item.width<this.maxX&&s>this.x-this.data.item.width&&i<6&&this.setDay(i+1,h,!this.dragValue,"1"):this.x>this.minX&&s>this.minX-this.data.item.width&&s<this.x-this.data.item.width&&i<6&&this.setDay(i,h,!this.dragValue,"5")),this.y<this.maxY&&e>this.y+this.data.item.height&&e<this.maxY+this.data.item.height&&a&&this.setDay(i-1,h,!this.dragValue,"2")):(e-this.data.item.height<this.startY&&e>this.y&&a&&(this.dragWeek?this.setWeek(h,this.dragValue):this.setDay(i-1,h,this.dragValue)),e-this.data.item.height<this.startY&&e>this.minY&&(this.startX<this.x?this.x<this.maxX&&s+this.data.item.width<this.maxX&&s>this.x-this.data.item.width&&this.setDay(i+1,h,!this.dragValue,"3"):this.x>this.minX&&s>this.minX-this.data.item.width&&s<this.x-this.data.item.width&&this.setDay(i,h,!this.dragValue,"3")),this.y>this.minY&&e>this.minY&&e<this.y&&a&&this.setDay(i-1,h,!this.dragValue,"4")),this.startX<this.x&&(this.x,this.maxX),t++}})}}}},toggleFullDay(t,e){for(let i=0;i<this.timeArrayLength/(this.steps/60);i++){let s=this.timetable[t].findIndex(t=>t==i);-1!=s?e&&this.timetable[t].splice(s,1):this.timetable[t].push(i)}this.$emit("input",this.timetable)},toggleWeek(t,e){for(const i in[0,1,2,3,4,5,6]){let s=this.timetable[i].findIndex(e=>e==t);-1!=s?e&&this.timetable[i].splice(s,1):this.timetable[i].push(t)}this.$emit("input",this.timetable)},setDay(t,e,i,s){if(!(t<0)){let s=this.timetable[t].findIndex(t=>t==e);i?-1!=s||this.timetable[t].push(e):-1!=s&&this.timetable[t].splice(s,1),this.$emit("input",this.timetable)}},setFullDay(t,e){if(void 0!==this.timetable[t])for(let i=0;i<this.timeArrayLength/(this.steps/60);i++){let s=this.timetable[t].findIndex(t=>t==i);e?-1!=s||this.timetable[t].push(i):-1!=s&&this.timetable[t].splice(s,1)}},setWeek(t,e){for(const i in[0,1,2,3,4,5,6]){let s=this.timetable[i].findIndex(e=>e==t);e?-1!=s||this.timetable[i].push(t):-1!=s&&this.timetable[i].splice(s,1)}this.$emit("input",this.timetable)},toggleDay(t,e){let i=this.timetable[t].findIndex(t=>t==e);-1!=i?this.timetable[t].splice(i,1):this.timetable[t].push(e),this.$emit("input",this.timetable)},checkFullWeek(t){for(const e in this.timetable)if(void 0==this.timetable[e].find(e=>e==t))return!1;return!0},checkFullDay(t){for(let e=0;e<this.timeArrayLength/(this.steps/60);e++)if(void 0==this.timetable[t].find(t=>t==e))return!1;return!0},setupCustom(){const t=this;if(t.timeArray.length>0&&(t.steps=60,t.timeArrayLength=t.timeArray.length),0==t.timeArray.length){for(var e=[],i=0,s=0;i<1440;s++){var a=Math.floor(i/60),h=i%60;e[s]=("0"+a).slice(-2)+"."+("0"+h).slice(-2),i+=t.steps}t.timeArray=e}}},mounted(){this.setupCustom(),this.value&&(this.timetable=this.value),window.addEventListener("mouseup",this.stopDrag)},watch:{value(t){t&&(this.timetable=t)}},computed:{rootCssVar(){return{"--vws-bg":this.bg,"--vws-bgActive":this.bgActive,"--vws-bgHover":this.bgHover,"--vws-text":this.textColor}}}},"data-v-18e71742",!1,void 0,void 0,void 0);const a={install:i};let h=null;return"undefined"!=typeof window?h=window.Vue:"undefined"!=typeof global&&(h=global.vue),h&&h.use(a),s.install=i,t.default=s,t}({});