vue-calendar-scheduler
Version:
An easy to use, feature rich calendar / scheduler for Vue
1 lines • 16.7 kB
JavaScript
var VueScheduler=function(e,t){"use strict";t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;function i(e,t,i,n,s,o,r,a,d,l){"boolean"!=typeof r&&(d=a,a=r,r=!1);const c="function"==typeof i?i.options:i;let u;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,s&&(c.functional=!0)),n&&(c._scopeId=n),o?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(o)},c._ssrRegister=u):t&&(u=r?function(e){t.call(this,l(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,a(e))}),u)if(c.functional){const e=c.render;c.render=function(t,i){return u.call(i),e(t,i)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,u):[u]}return i}const n="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function s(e){return(e,t)=>function(e,t){const i=n?t.media||"default":e,s=r[i]||(r[i]={ids:new Set,styles:[]});if(!s.ids.has(e)){s.ids.add(e);let i=t.source;if(t.map&&(i+="\n/*# sourceURL="+t.map.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",t.media&&s.element.setAttribute("media",t.media),void 0===o&&(o=document.head||document.getElementsByTagName("head")[0]),o.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(i),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{const e=s.ids.size-1,t=document.createTextNode(i),n=s.element.childNodes;n[e]&&s.element.removeChild(n[e]),n.length?s.element.insertBefore(t,n[e]):s.element.appendChild(t)}}}(e,t)}let o;const r={};var a=i({render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"hours-column"},e._l(e.hours,(function(t){return i("div",{key:t.time,class:t.onHour?"hour-cell on-hour":"hour-cell",style:"height: "+e.incrementHeight+"px"},[i("div",{staticClass:"hour-cell-text"},[e._v(" \n "+e._s(t.prettyTime)+"\n ")])])})),0)},staticRenderFns:[]},(function(e){e&&e("data-v-c79a9a8a_0",{source:'.hours-column{width:60px;flex:none}.hour-cell:last-of-type{border-right:none}.hour-cell{text-align:right;padding-right:11px;border-bottom:none;position:relative;border-right:#b9b9b9 1px solid}.hour-cell::before{border-top:#b9b9b9 1px solid;width:7px;position:absolute;height:1px;display:block;content:"";right:-1px;top:-1px;text-decoration:inherit}.hour-cell.on-hour::before{width:12px}.hour-cell-text{display:block;position:relative;top:-6px;font-size:10px;padding-right:4px}.hour-cell-header{width:90px;padding-right:8px;border-bottom:none;position:relative}',map:void 0,media:void 0})}),{props:["hours","paddingPixels","incrementHeight","headerHeight"]},void 0,!1,void 0,!1,s,void 0,void 0),d=i({render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"calendar-head",style:"height:"+e.headerHeight+"px"},[i("div",{staticClass:"days-row"},[i("div",{staticClass:"day-column-header",style:"height:"+e.headerHeight+"px"}),e._v(" "),e._l(e.days,(function(t,n){return i("div",{key:"day-"+n,staticClass:"day-column"},[i("div",{staticClass:"day-column-weekday"},[e._v("\n "+e._s(t.format("ddd"))+"\n ")]),e._v(" "),i("div",{staticClass:"day-column-day"},[i("div",{class:t.isSame(e.now,"day")?"day-column-button day-column-button-today":"day-column-button"},[i("span",{staticClass:"day-column-button-content"},[e._v(e._s(t.format("D")))])])]),e._v(" "),i("div",{staticClass:"day-column-fill"},e._l(e.users,(function(t){return i("div",{key:t.id,staticClass:"day-column-user"},[i("div",{staticClass:"day-column-user-content"},[e._v(" "+e._s(t.initials)+" ")])])})),0)])}))],2)])},staticRenderFns:[]},(function(e){e&&e("data-v-8fe1127a_0",{source:".day-column-fill{height:calc(100% - 76px);display:flex;align-items:center}.day-column-fill .day-column-user:last-of-type{border-right:none!important}.day-column-user{flex:1;text-align:center;border-right:#b9b9b9 1px solid;height:100%;display:flex;align-items:center}.day-column-user-content{flex:1;text-align:center}.day-column-button{background-color:#f4f4f4ba;height:56px;border-radius:50%;width:56px;align-items:center;display:inline-flex;flex:0 0 auto;font-weight:500;letter-spacing:.0892857143em;justify-content:center;outline:0;position:relative;text-decoration:none;text-indent:.0892857143em;text-transform:uppercase;transition-duration:.28s;transition-property:box-shadow,transform,opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);cursor:default}.day-column-button-today{background-color:#f5f5f5}.day-column-button-content{align-items:center;color:inherit;display:flex;flex:1 0 auto;justify-content:inherit;line-height:normal;position:relative}.calendar-head{display:flex;flex-direction:column;overflow:hidden;height:100%;width:100%}.day-column-weekday{color:rgba(0,0,0,.38);user-select:none;padding:3px 0 0 0;font-size:11px;text-align:center;text-transform:uppercase}.day-column-day{user-select:none;padding:0 0 3px 0;text-align:center;font-size:18px;font-weight:500;color:rgba(0,0,0,.78)}.day-column-today{background-color:rgba(0,0,0,.03)}.day-body{flex:1;width:0;position:relative}.day-column{flex:1 1 auto;position:relative;border-right:#b9b9b9 1px solid;border-bottom:#b9b9b9 1px solid}.day-column-header{flex:0;padding-right:59px;border-right:#b9b9b9 1px solid}.days-row{flex:none;display:flex}",map:void 0,media:void 0})}),{props:["users","days","headerHeight"],data:function(){return{now:t()}}},void 0,!1,void 0,!1,s,void 0,void 0),l=i({render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"body-day-user-event-relative"},[i("div",{staticClass:"body-day-user-event",style:"top: "+e.calculateEventOffset()+"px; height: "+e.calculateEventHeight()+"px; background-color: "+e.event.color+";"},[i("div",{staticClass:"body-day-user-event-text"},[i("div",{staticClass:"body-day-user-event-name"},[e._v(e._s(e.event.name))]),e._v(" "),i("div",{staticClass:"body-day-user-event-timings"},[e._v(" "+e._s(e.generatePrettyTimings(e.event))+" ")]),e._v(" "),i("div",{staticClass:"body-day-user-event-description-text"},[e._v(e._s(e.event.description))])])])])},staticRenderFns:[]},(function(e){e&&e("data-v-dcd86a44_0",{source:".body-day-user-event-relative{position:relative}.body-day-user-event-name{font-weight:700}.body-day-user-event-timings{margin-top:3px}.body-day-user-event-description-text{font-size:12px;margin-top:8px}.body-day-user-event-text{padding:8px;color:#fff}.body-day-user-event{width:calc(100% - 1px);background-color:#000;flex:1;margin-right:.125px;margin-left:.125px;position:absolute;border-radius:4px;z-index:50}",map:void 0,media:void 0})}),{props:["event","pixelsPerMinute","day","hours","eventTimeFormat"],methods:{generatePrettyTimings:function(){if(this.eventTimeFormat)var e=this.eventTimeFormat;else e="h:mm";return t(this.event.start).format(e)+" - "+t(this.event.end).format(e)},calculateEventOffset:function(){return t.duration(t(this.event.start).diff(t(this.day.format("Y-M-D")+" "+this.hours[0].time,"Y-M-D Hm"))).asMinutes()*this.pixelsPerMinute},calculateEventHeight:function(){return(t.duration(t(this.event.end).diff(t(this.event.start))).asMinutes()*this.pixelsPerMinute).toPrecision(15)-1}}},void 0,!1,void 0,!1,s,void 0,void 0),c=i({render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"body-day-column no-select",style:"height: calc(100% - "+(e.incrementHeight+e.paddingPixels)+"px);"},[e._l(e.users,(function(t){return i("div",{key:t.id,ref:"selectAnchor"+t.id,refInFor:!0,staticClass:"body-day-user-column no-select",on:{mousedown:function(i){return e.beginSelect(i,t.id)}}},[e._l(e.hours,(function(t){return i("div",{key:t.time,class:e.hourClass(t),style:"height: "+e.incrementHeight+"px;"})})),e._v(" "),e.mouseDown?i("div",{ref:"selectBox",refInFor:!0,staticClass:"selectBox",style:e.selectionBoxStyling}):e._e()],2)})),e._v(" "),i("div",{staticClass:"events-column no-select"},e._l(e.users,(function(t){return i("div",{key:t.id,staticClass:"events-users-column"},e._l(e.filterEventsToDateAndUser(t.id),(function(t){return i("calendar-event",{key:t.id,attrs:{event:t,day:e.day,hours:e.hours,users:e.users,pixelsPerMinute:e.pixelsPerMinute(),eventTimeFormat:e.eventTimeFormat},nativeOn:{mousedown:function(i){return i.stopPropagation(),e.$emit("event-click",t)}}})})),1)})),0)],2)},staticRenderFns:[]},(function(e){e&&e("data-v-486de4d6_0",{source:'.selectBox{background-color:rgba(212,212,212,.5);border:1px solid #8b8b8b;position:absolute;z-index:10}.no-select{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.calendar-selected{background-color:#f5f5f5}.body-day-column{border-right:#b9b9b9 1px solid;flex:1;width:0;top:0;position:relative;display:flex;flex-direction:row}.body-day-user-column{flex:1;border-left:1px solid #e0e0e0;z-index:9}.body-day-user-column:first-of-type{border-left:none!important}.last-day-increment{background-color:rgba(0,0,0,0)}.events-column{display:flex;flex:1;position:absolute;top:0;bottom:0;left:0;right:0}.events-users-column{flex:1;width:100%;overflow:hidden}.day-increment.on-hour:before{border-top:1px solid transparent;box-shadow:0 -1px 0 #e0e0e0;content:"";display:block;height:1px}.day-increment.on-hour:last-of-type::before{border-top:1px solid transparent;box-shadow:0 -1px 0 #b9b9b9;content:"";display:block;height:1px}.day-increment{z-index:10}.day-increment.on-hour:first-of-type::before{border-top:none;box-shadow:none}',map:void 0,media:void 0})}),{components:{CalendarEvent:l},props:["hours","incrementSize","incrementHeight","users","events","day","calendarHeight","paddingPixels","eventTimeFormat"],data:function(){return{mouseDown:!1,selectBoxStyle:"",startPoint:{},endPoint:{},clickedUser:0,activeRef:{},selectedTimes:[]}},watch:{selectedTimes:function(e,t){e.filter((function(e){return!t.includes(e)})).forEach((function(e){e.classList.add("calendar-selected")})),t.filter((function(t){return!e.includes(t)})).forEach((function(e){e.classList.remove("calendar-selected")}))}},methods:{pixelsPerMinute:function(){var e=t.duration(t(this.hours[this.hours.length-1].time,"Hm").diff(t(this.hours[0].time,"Hm"))).asMinutes();return(this.calendarHeight/e).toPrecision(15)},filterEventsToDateAndUser:function(e){var i=this;return this.events.filter((function(n){return n.user_id===e&&t(n.start).isSame(i.day,"day")}))},beginSelect:function(e,t){this.mouseDown=!0,this.activeRef=this.$refs["selectAnchor"+t][0],this.clickedUser=t,this.startPoint={x:e.pageX,y:e.pageY},window.addEventListener("mousemove",this.mouseMove),window.addEventListener("mouseup",this.mouseUp)},mouseMove:function(e){var t=this;this.mouseDown&&(this.endPoint={x:e.pageX,y:e.pageY},this.selectedTimes=Array.from(this.activeRef.children).filter((function(e){return t.isItemSelected(e.$el||e)})))},isItemSelected:function(e){if(e.classList.contains("day-increment")){var t=this.selectionBox,i={top:e.offsetTop,left:e.offsetLeft,width:e.clientWidth,height:e.clientHeight};return!!(t.left<=i.left+i.width&&t.left+t.width>=i.left&&t.top<=i.top+i.height&&t.top+t.height>=i.top)}return!1},mouseUp:function(e){if(window.removeEventListener("mousemove",this.mouseMove),window.removeEventListener("mouseup",this.mouseUp),!this.endPoint.x)return{};this.$emit("times-selected",this.selectedTimeRange()),this.mouseDown=!1,this.startPoint=null,this.endPoint=null,this.selectedTimes=[]},getScroll:function(){return"undefined"==typeof document?{x:0,y:0}:{x:this.activeRef.scrollLeft||document.body.scrollLeft||document.documentElement.scrollLeft,y:this.activeRef.scrollTop||document.body.scrollTop||document.documentElement.scrollTop}},selectedTimeRange:function(){var e=this.selectedTimes[0].offsetTop/this.pixelsPerMinute(),i=(this.selectedTimes[this.selectedTimes.length-1].offsetTop+this.incrementHeight)/this.pixelsPerMinute();return e=t(this.hours[0].moment).add(e,"minutes"),i=t(this.hours[0].moment).add(i,"minutes"),{start:e=t(this.day).hour(e.hour()).minute(e.minute()),end:i=t(this.day).hour(i.hour()).minute(i.minute()),user_id:this.clickedUser}},hourClass:function(e){var t=e.onHour?"day-increment on-hour ":"day-increment ";return t+=e==this.hours[this.hours.length-1]?"last-day-increment":""}},computed:{selectionBox:function(){if(!this.mouseDown)return{};if(!this.endPoint.x)return{};var e=this.activeRef.getBoundingClientRect(),t=this.getScroll(),i=Math.min(this.startPoint.x,this.endPoint.x)-e.left-t.x+this.activeRef.offsetLeft,n=Math.abs(this.startPoint.x-this.endPoint.x),s=Math.min(this.startPoint.y,this.endPoint.y)-e.top-t.y,o=Math.abs(this.startPoint.y-this.endPoint.y);return i<this.activeRef.offsetLeft&&(i=this.activeRef.offsetLeft,n=this.startPoint.x-e.left-t.x),n+i>this.activeRef.offsetLeft+this.activeRef.offsetWidth&&(n=this.activeRef.offsetLeft+this.activeRef.offsetWidth-i),Math.abs(s)!==s&&(s=this.activeRef.offsetTop,o=this.startPoint.y-e.top-t.y),s+o>this.activeRef.offsetTop+this.activeRef.offsetHeight&&(o=this.activeRef.offsetTop+this.activeRef.offsetHeight-s),{left:i,top:s,width:n,height:o}},selectionBoxStyling:function(){if(!this.mouseDown||!this.startPoint||!this.endPoint)return{background:"black"};var e=this.selectionBox,t=e.left,i=e.top,n=e.width,s=e.height;return{left:"".concat(t,"px"),top:"".concat(i,"px"),width:"".concat(n,"px"),height:"".concat(s,"px")}}}},void 0,!1,void 0,!1,s,void 0,void 0),u=i({render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{ref:"calendar",staticClass:"calendar"},[i("calendar-head",{attrs:{days:e.days,headerHeight:e.headerHeight,users:e.users}}),e._v(" "),i("div",{staticClass:"calendar-body"},[i("hour-column",{attrs:{hours:e.hours,paddingPixels:e.paddingPixels,incrementHeight:e.incrementHeight,headerHeight:e.headerHeight}}),e._v(" "),e._l(e.days,(function(t,n){return i("day-increment",{key:"day-"+n,attrs:{day:t,hours:e.hours,users:e.users,incrementHeight:e.incrementHeight,events:e.events,paddingPixels:e.paddingPixels,calendarHeight:e.$refs.calendar.clientHeight-(e.headerHeight+e.paddingPixels+e.incrementHeight),incrementSize:e.incrementSize,eventTimeFormat:e.eventTimeFormat},on:{"event-click":e.eventClick,"times-selected":e.timesSelected}})}))],2)],1)},staticRenderFns:[]},(function(e){e&&e("data-v-5f8d6626_0",{source:".calendar{flex:1 1 60%;display:flex;position:relative;flex-direction:column}.calendar-body{display:flex;flex:1}",map:void 0,media:void 0})}),{name:"VueScheduler",components:{HourColumn:a,CalendarHead:d,DayIncrement:c},props:["openingTimes","events","format","startDate","users","options"],data:function(){return{incrementHeight:30,paddingPixels:10,hours:[],days:[],now:t(),headerHeight:110,incrementSize:15,eventTimeFormat:"hh:mm",weekDays:[1,5],outputFormat:null}},mounted:function(){this.setOptions(),this.setHours(),this.setIncrementHeight(),this.setDays()},watch:{format:function(e,t){e===t||"week"!==e&&"day"!==e||(this.days=[],this.setDays())},startDate:function(e,t){e!==t&&(this.days=[],this.setDays())}},methods:{setOptions:function(){var e=this;Object.keys(this.options).forEach((function(t){e[t]=e.options[t]}))},setIncrementHeight:function(){this.incrementHeight=Math.floor((this.$refs.calendar.clientHeight-this.headerHeight)/this.hours.length),this.paddingPixels=(this.$refs.calendar.clientHeight-this.headerHeight)%this.hours.length},setHours:function(){if(this.openingTimes.format)var e=this.openingTimes.format;else e="Hm";for(var i=t(this.openingTimes.open,e),n=t(this.openingTimes.close,e);t(i).isSameOrBefore(n);){var s="00"===t(i).format("HHmm").substr(2,4);this.hours.push({time:t(i).format("HHmm"),prettyTime:s?t(i).format("h A"):"",onHour:s,moment:i}),i=t(i).add(this.incrementSize,"minutes")}},setDays:function(){if("week"==this.format)for(var e=t(this.startDate).day(this.weekDays[0]),i=e.clone().day(this.weekDays[1]);!e.isAfter(i);)this.days.push(e.clone()),e.add(1,"days");else"day"==this.format&&this.days.push(t(this.startDate))},eventClick:function(e){this.$emit("event-click",e)},timesSelected:function(e){this.outputFormat&&(e={start:e.start.format(this.outputFormat),end:e.end.format(this.outputFormat)}),this.$emit("times-selected",e)}}},void 0,!1,void 0,!1,s,void 0,void 0),h=function(e){h.installed||(h.installed=!0,e.component("VueScheduler",u))},f={install:h},m=null;return"undefined"!=typeof window?m=window.Vue:"undefined"!=typeof global&&(m=global.Vue),m&&m.use(f),u.install=h,e.default=u,e}({},moment);