vue-simple-calendar
Version:
Simple Vue 3 calendar event control
2 lines (1 loc) • 18.6 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).CalendarView={},e.Vue)}(this,(function(e,t){"use strict";var a={today(){return this.dateOnly(new Date)},beginningOfPeriod(e,t,a){switch(t){case"year":return new Date(e.getFullYear(),0);case"month":return new Date(e.getFullYear(),e.getMonth());case"week":return this.beginningOfWeek(e,a);default:return e}},daysOfWeek(e){return[...Array(7)].map(((t,a)=>this.addDays(e,a)))},addDays:(e,t)=>new Date(e.getFullYear(),e.getMonth(),e.getDate()+t,e.getHours(),e.getMinutes(),e.getSeconds()),beginningOfWeek(e,t){return this.addDays(e,(t-e.getDay()-7)%-7)},endOfWeek(e,t){return this.addDays(this.beginningOfWeek(e,t),7)},beginningOfMonth:e=>new Date(e.getFullYear(),e.getMonth()),instanceOfMonth:e=>Math.ceil(e.getDate()/7),incrementPeriod:(e,t,a)=>new Date(e.getFullYear()+("year"==t?a:0),e.getMonth()+("month"==t?a:0),e.getDate()+("week"==t?7*a:0)),paddedMonth:e=>("0"+String(e.getMonth()+1)).slice(-2),paddedDay:e=>("0"+String(e.getDate())).slice(-2),isoYearMonth(e){return e.getFullYear()+"-"+this.paddedMonth(e)},isoYearMonthDay(e){return this.isoYearMonth(e)+"-"+this.paddedDay(e)},isoMonthDay(e){return this.paddedMonth(e)+"-"+this.paddedDay(e)},formattedTime(e,t,a){if(0===e.getHours()&&0===e.getMinutes()&&0===e.getSeconds())return"";if(!this.supportsIntl()){var r=6e4*(new Date).getTimezoneOffset();return new Date(e.getTime()-r).toISOString().slice(11,16)}return e.toLocaleTimeString(t,a)},formattedPeriod(e,t,a,r){const i=e.getFullYear()===t.getFullYear(),n=this.isSameMonth(e,t),s=!("year"===a)&&!("month"===a);let o=[];return o.push(r[e.getMonth()]),s&&(o.push(" "),o.push(e.getDate())),i||(o.push(s?", ":" "),o.push(e.getFullYear())),n&&i?s&&o.push(" – "):(o.push(" – "),n||o.push(r[t.getMonth()]),s&&o.push(" ")),s?(o.push(t.getDate()),o.push(", ")):o.push(" "),o.push(t.getFullYear()),o.join("")},dayDiff:(e,t)=>(Date.UTC(t.getFullYear(),t.getMonth(),t.getDate())-Date.UTC(e.getFullYear(),e.getMonth(),e.getDate()))/864e5,isSameDate(e,t){return e&&t&&0===this.dayDiff(e,t)},isSameDateTime:(e,t)=>e&&t&&e.getTime()===t.getTime(),isSameMonth:(e,t)=>e&&t&&e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth(),isPastMonth(e){return this.beginningOfMonth(e)<this.beginningOfMonth(this.today())},isFutureMonth(e){return this.beginningOfMonth(e)>this.beginningOfMonth(this.today())},isInFuture(e){return this.dateOnly(e)>this.today()},isInPast(e){return this.dateOnly(e)<this.today()},isLastInstanceOfMonth(e){return e.getMonth()!==this.addDays(e,7).getMonth()},isLastDayOfMonth(e){return e.getMonth()!==this.addDays(e,1).getMonth()},fromIsoStringToLocalDate(e){let t=[...Array(7)].map((e=>0));return e.split(/\D/,7).forEach(((e,a)=>t[a]=Number(e))),t[1]--,new Date(t[0],t[1],t[2],t[3],t[4],t[5],t[6])},toLocalDate(e){return"string"==typeof e?this.fromIsoStringToLocalDate(e):new Date(e)},dateOnly(e){const t=new Date(e);return t.setHours(0,0,0,0),t},languageCode:e=>e.substring(0,2),supportsIntl:()=>"undefined"!=typeof Intl,getFormattedMonthNames(e,t){if(!this.supportsIntl())return[...Array(12)].map((e=>""));const a=new Intl.DateTimeFormat(e,{month:t});return[...Array(12)].map(((e,t)=>a.format(new Date(2017,t,1))))},getFormattedWeekdayNames(e,t,a){if(!this.supportsIntl())return[...Array(7)].map((e=>""));const r=new Intl.DateTimeFormat(e,{weekday:t});return[...Array(7)].map(((e,t)=>r.format(new Date(2017,0,(t+1+a)%7))))},getDefaultBrowserLocale:()=>"undefined"==typeof navigator?"unk":(navigator.languages&&navigator.languages.length?navigator.languages[0]:navigator.language).toLowerCase(),normalizeItem(e,t){const a=e.classes?[...e.classes]:[];return t&&a.push("isHovered"),{originalItem:e,startDate:this.toLocalDate(e.startDate),endDate:this.toLocalDate(e.endDate||e.startDate),classes:a,title:e.title||"Untitled",id:e.id}}};class r{constructor(){this.currentDragItem=null,this.dateSelectionOrigin=null,this.currentHoveredItemId="",this.CalendarMath=a}}var i=t.defineComponent({name:"CalendarView",props:{showDate:{type:Date,default:void 0},displayPeriodUom:{type:String,default:"month"},displayPeriodCount:{type:Number,default:1},displayWeekNumbers:{type:Boolean,default:!1},locale:{type:String,default:void 0},monthNameFormat:{type:String,default:"long"},weekdayNameFormat:{type:String,default:"short"},showTimes:{type:Boolean,default:!1},timeFormatOptions:{type:Object,default:()=>{}},disablePast:{type:Boolean,default:!1},disableFuture:{type:Boolean,default:!1},enableDateSelection:{type:Boolean,default:!1},selectionStart:{type:Date,default:null},selectionEnd:{type:Date,default:null},enableDragDrop:{type:Boolean,default:!1},startingDayOfWeek:{type:Number,default:0},items:{type:Array,default:()=>[]},dateClasses:{type:Object,default:()=>{}},itemTop:{type:String,default:"1.4em"},itemContentHeight:{type:String,default:"1.4em"},itemBorderHeight:{type:String,default:"2px"},periodChangedCallback:{type:Function,default:void 0},currentPeriodLabel:{type:String,default:""},currentPeriodLabelIcons:{type:String,default:"⇤-⇥"},doEmitItemMouseEvents:{type:Boolean,default:!1}},emits:["input","period-changed","click-date","click-item","item-mouseenter","item-mouseleave","drag-start","drag-over-date","drag-enter-date","drag-leave-date","drop-on-date","date-selection","date-selection-start","date-selection-finish"],data:()=>new r,computed:{displayLocale(){return this.locale||a.getDefaultBrowserLocale()},defaultedShowDate(){return this.showDate?a.dateOnly(this.showDate):a.today()},periodStart(){return a.beginningOfPeriod(this.defaultedShowDate,this.displayPeriodUom,this.startingDayOfWeek)},periodEnd(){return a.addDays(a.incrementPeriod(this.periodStart,this.displayPeriodUom,this.displayPeriodCount),-1)},periodStartCalendarWeek(){const e=a.beginningOfWeek(a.beginningOfPeriod(this.periodStart,"year",0),this.startingDayOfWeek),t=a.beginningOfWeek(this.periodStart,this.startingDayOfWeek);return 1+Math.floor(a.dayDiff(e,t)/7)},displayFirstDate(){return a.beginningOfWeek(this.periodStart,this.startingDayOfWeek)},displayLastDate(){return a.endOfWeek(this.periodEnd,this.startingDayOfWeek)},weeksOfPeriod(){const e=Math.floor((a.dayDiff(this.displayFirstDate,this.displayLastDate)+1)/7);return[...Array(e)].map(((e,t)=>a.addDays(this.displayFirstDate,7*t)))},monthNames(){return a.getFormattedMonthNames(this.displayLocale,this.monthNameFormat)},weekdayNames(){return a.getFormattedWeekdayNames(this.displayLocale,this.weekdayNameFormat,this.startingDayOfWeek)},fixedItems(){const e=this;return this.items?this.items.map((t=>a.normalizeItem(t,t.id===e.currentHoveredItemId))):[]},currentPeriodStart(){return a.beginningOfPeriod(a.today(),this.displayPeriodUom,this.startingDayOfWeek)},currentPeriodEnd(){return a.addDays(a.incrementPeriod(this.currentPeriodStart,this.displayPeriodUom,this.displayPeriodCount),-1)},periodLabel(){return a.formattedPeriod(this.periodStart,this.periodEnd,this.displayPeriodUom,this.monthNames)},currentPeriodLabelFinal(){const e=this.currentPeriodStart,t=this.periodStart;return this.currentPeriodLabel?"icons"===this.currentPeriodLabel?this.currentPeriodLabelIcons[Math.sign(e.getTime()-t.getTime())+1]:this.currentPeriodLabel:a.formattedPeriod(e,this.currentPeriodEnd,this.displayPeriodUom,this.monthNames)},headerProps(){return{previousYear:this.getIncrementedPeriod(-12),previousPeriod:this.getIncrementedPeriod(-1),nextPeriod:this.getIncrementedPeriod(1),previousFullPeriod:this.getIncrementedPeriod(-this.displayPeriodCount),nextFullPeriod:this.getIncrementedPeriod(this.displayPeriodCount),nextYear:this.getIncrementedPeriod(12),currentPeriod:this.currentPeriodStart,currentPeriodLabel:this.currentPeriodLabelFinal,periodStart:this.periodStart,periodEnd:this.periodEnd,displayLocale:this.displayLocale,displayFirstDate:this.displayFirstDate,displayLastDate:this.displayLastDate,monthNames:this.monthNames,fixedItems:this.fixedItems,periodLabel:this.periodLabel}},periodRange(){return{periodStart:this.periodStart,periodEnd:this.periodEnd,displayFirstDate:this.displayFirstDate,displayLastDate:this.displayLastDate}}},watch:{periodRange:{immediate:!0,handler(e){this.periodChangedCallback&&(this.$emit("period-changed"),this.periodChangedCallback(e,"watch"))}}},methods:{onClickDay(e,t){this.disablePast&&a.isInPast(e)||this.disableFuture&&a.isInFuture(e)||this.$emit("click-date",e,this.findAndSortItemsInDateRange(e,e),t)},onClickItem(e,t){this.$emit("click-item",e,t)},getColumnDOWClass(e){return"dow"+(e+this.startingDayOfWeek)%7},getIncrementedPeriod(e){const t=a.incrementPeriod(this.periodStart,this.displayPeriodUom,e),r=a.incrementPeriod(t,this.displayPeriodUom,this.displayPeriodCount);return this.disablePast&&r<=a.today()||this.disableFuture&&t>a.today()?null:t},onMouseEnterItem(e,t){this.currentHoveredItemId=e.id,this.doEmitItemMouseEvents&&this.$emit("item-mouseenter",e,t)},onMouseLeaveItem(e,t){this.currentHoveredItemId="",this.doEmitItemMouseEvents&&this.$emit("item-mouseleave",e,t)},onDragDateStart(e,t){var a,r;if(!this.enableDateSelection)return!1;null==(a=t.dataTransfer)||a.setData("text",e.toString());let i=new Image;return i.src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==",null==(r=t.dataTransfer)||r.setDragImage(i,10,10),this.dateSelectionOrigin=e,this.emitDateSelection("date-selection-start",e,t),!0},onDragItemStart(e,t){var a;return!!this.enableDragDrop&&(null==(a=t.dataTransfer)||a.setData("text",e.id),this.currentDragItem=e,this.dateSelectionOrigin=null,this.$emit("drag-start",e,t),!0)},handleDragEvent(e,t,a){return!!this.enableDragDrop&&(this.$emit(e,this.currentDragItem,t,a),!0)},onDragOver(e,t){this.handleDragEvent("drag-over-date",e,t)},onDragEnter(e,t){if(this.enableDateSelection&&this.dateSelectionOrigin)return void this.emitDateSelection("date-selection",e,t);if(!this.handleDragEvent("drag-enter-date",e,t))return;t.target.classList.add("draghover")},onDragLeave(e,t){if(this.enableDateSelection&&this.selectionStart)return;if(!this.handleDragEvent("drag-leave-date",e,t))return;t.target.classList.remove("draghover")},onDrop(e,t){if(this.enableDateSelection&&this.dateSelectionOrigin)return void this.emitDateSelection("date-selection-finish",e,t);if(!this.handleDragEvent("drop-on-date",e,t))return;t.target.classList.remove("draghover")},emitDateSelection(e,t,a){this.dateSelectionOrigin&&this.$emit(e,t<=this.dateSelectionOrigin?[t,this.dateSelectionOrigin,a]:[this.dateSelectionOrigin,t,a])},itemComparer:(e,t)=>e.startDate<t.startDate?-1:t.startDate<e.startDate?1:e.endDate>t.endDate?-1:t.endDate>e.endDate?1:e.id<t.id?-1:1,findAndSortItemsInWeek(e){return this.findAndSortItemsInDateRange(e,a.addDays(e,6))},findAndSortItemsInDateRange(e,t){return this.fixedItems.filter((r=>r.endDate>=e&&a.dateOnly(r.startDate)<=t),this).sort(this.itemComparer)},dayHasItems(e){return!!this.fixedItems.find((t=>t.endDate>=e&&a.dateOnly(t.startDate)<=e))},dayIsSelected(e){return!(!this.selectionStart||!this.selectionEnd)&&(!(e<a.dateOnly(this.selectionStart))&&!(e>a.dateOnly(this.selectionEnd)))},getWeekItems(e){const t=this.findAndSortItemsInWeek(e),r=[],i=[[],[],[],[],[],[],[]];for(let n=0;n<t.length;n++){const s=Object.assign({},t[n],{classes:[...t[n].classes],itemRow:0}),o=s.startDate<e,d=o?0:a.dayDiff(e,s.startDate),l=Math.min(7-d,a.dayDiff(a.addDays(e,d),s.endDate)+1);o&&s.classes.push("continued"),a.dayDiff(e,s.endDate)>6&&s.classes.push("toBeContinued"),a.isInPast(s.endDate)&&s.classes.push("past"),s.originalItem.url&&s.classes.push("hasUrl");for(let e=0;e<7;e++)if(e===d){let t=0;for(;i[e][t];)t++;s.itemRow=t,i[e][t]=!0}else e<d+l&&(i[e][s.itemRow]=!0);s.classes.push(`offset${d}`),s.classes.push(`span${l}`),r.push(s)}return r},getFormattedTimeRange(e){const t='<span class="startTime">'+a.formattedTime(e.startDate,this.displayLocale,this.timeFormatOptions)+"</span>";let r="";return a.isSameDateTime(e.startDate,e.endDate)||(r=a.formattedTime(e.endDate,this.displayLocale,this.timeFormatOptions)+"</span>"),t+r},getItemTitle(e){return this.showTimes?this.getFormattedTimeRange(e)+" "+e.title:e.title},getItemTop(e){const t=e.itemRow,a=this.itemContentHeight,r=this.itemBorderHeight;return`calc(${this.itemTop} + ${t}*${a} + ${t}*${r})`}}});const n={class:"cv-header-days"},s={key:0,class:"cv-weeknumber"},o={key:0,class:"cv-weeknumber"},d={class:"cv-weekdays"},l={class:"cv-day-number"};i.render=function(e,a,r,i,h,u){return t.openBlock(),t.createBlock("div",{"aria-label":"Calendar",class:["cv-wrapper","locale-"+e.CalendarMath.languageCode(e.displayLocale),"locale-"+e.displayLocale,"y"+e.periodStart.getFullYear(),"m"+e.CalendarMath.paddedMonth(e.periodStart),"period-"+e.displayPeriodUom,"periodCount-"+e.displayPeriodCount,{past:e.CalendarMath.isPastMonth(e.periodStart),future:e.CalendarMath.isFutureMonth(e.periodStart),noIntl:!e.CalendarMath.supportsIntl}]},[t.renderSlot(e.$slots,"header",{headerProps:e.headerProps}),t.createVNode("div",n,[e.displayWeekNumbers?(t.openBlock(),t.createBlock("div",s)):t.createCommentVNode("",!0),(t.openBlock(!0),t.createBlock(t.Fragment,null,t.renderList(e.weekdayNames,((a,r)=>t.renderSlot(e.$slots,"dayHeader",{index:e.getColumnDOWClass(r),label:a},(()=>[(t.openBlock(),t.createBlock("div",{key:e.getColumnDOWClass(r),class:[e.getColumnDOWClass(r),"cv-header-day"]},t.toDisplayString(a),3))])))),256))]),t.createVNode("div",{"aria-multiselectable":e.enableDateSelection,class:"cv-weeks"},[(t.openBlock(!0),t.createBlock(t.Fragment,null,t.renderList(e.weeksOfPeriod,((a,r)=>(t.openBlock(),t.createBlock("div",{key:`${r}-week`,class:["cv-week","week"+(r+1),"ws"+e.CalendarMath.isoYearMonthDay(a)]},[e.displayWeekNumbers?(t.openBlock(),t.createBlock("div",o,[t.renderSlot(e.$slots,"weekNumber",{date:a,numberInYear:e.periodStartCalendarWeek+r,numberInPeriod:r+1},(()=>[t.createVNode("span",null,t.toDisplayString(e.periodStartCalendarWeek+r),1)]))])):t.createCommentVNode("",!0),t.createVNode("div",d,[(t.openBlock(!0),t.createBlock(t.Fragment,null,t.renderList(e.CalendarMath.daysOfWeek(a),((a,r)=>(t.openBlock(),t.createBlock("div",{key:e.getColumnDOWClass(r),draggable:e.enableDateSelection,class:["cv-day",e.getColumnDOWClass(r),"d"+e.CalendarMath.isoYearMonthDay(a),"d"+e.CalendarMath.isoMonthDay(a),"d"+e.CalendarMath.paddedDay(a),"instance"+e.CalendarMath.instanceOfMonth(a),{today:e.CalendarMath.isSameDate(a,e.CalendarMath.today()),outsideOfMonth:!e.CalendarMath.isSameMonth(a,e.defaultedShowDate),past:e.CalendarMath.isInPast(a),future:e.CalendarMath.isInFuture(a),last:e.CalendarMath.isLastDayOfMonth(a),lastInstance:e.CalendarMath.isLastInstanceOfMonth(a),hasItems:e.dayHasItems(a),selectionStart:e.CalendarMath.isSameDate(a,e.selectionStart),selectionEnd:e.CalendarMath.isSameDate(a,e.selectionEnd)},...e.dateClasses&&e.dateClasses[e.CalendarMath.isoYearMonthDay(a)]||[]],"aria-grabbed":e.enableDateSelection?e.dayIsSelected(a):"undefined","aria-label":a.getDate(),"aria-selected":e.dayIsSelected(a),"aria-dropeffect":e.enableDragDrop&&e.currentDragItem?"move":e.enableDateSelection&&e.dateSelectionOrigin?"execute":"none",onClick:t=>e.onClickDay(a,t),onDragstart:t=>e.onDragDateStart(a,t),onDrop:t.withModifiers((t=>e.onDrop(a,t)),["prevent"]),onDragover:t.withModifiers((t=>e.onDragOver(a,t)),["prevent"]),onDragenter:t.withModifiers((t=>e.onDragEnter(a,t)),["prevent"]),onDragleave:t.withModifiers((t=>e.onDragLeave(a,t)),["prevent"])},[t.createVNode("div",l,t.toDisplayString(a.getDate()),1),t.renderSlot(e.$slots,"dayContent",{day:a})],42,["draggable","aria-grabbed","aria-label","aria-selected","aria-dropeffect","onClick","onDragstart","onDrop","onDragover","onDragenter","onDragleave"])))),128)),(t.openBlock(!0),t.createBlock(t.Fragment,null,t.renderList(e.getWeekItems(a),(r=>t.renderSlot(e.$slots,"item",{value:r,weekStartDate:a,top:e.getItemTop(r)},(()=>[(t.openBlock(),t.createBlock("div",{key:r.id,draggable:e.enableDragDrop,"aria-grabbed":e.enableDragDrop?r==e.currentDragItem:"undefined",class:[r.classes,"cv-item"],title:r.title,style:`top:${e.getItemTop(r)};${r.originalItem.style}`,onDragstart:t=>e.onDragItemStart(r,t),onMouseenter:t=>e.onMouseEnterItem(r,t),onMouseleave:t=>e.onMouseLeaveItem(r,t),onClick:t.withModifiers((t=>e.onClickItem(r,t)),["stop"]),innerHTML:e.getItemTitle(r)},null,46,["draggable","aria-grabbed","title","onDragstart","onMouseenter","onMouseleave","onClick","innerHTML"]))])))),256))])],2)))),128))],8,["aria-multiselectable"])],2)};var h=t.defineComponent({name:"CalendarViewHeader",props:{headerProps:{type:Object,required:!0},previousYearLabel:{type:String,default:"<<"},previousPeriodLabel:{type:String,default:"<"},nextPeriodLabel:{type:String,default:">"},nextYearLabel:{type:String,default:">>"}},emits:["input"],methods:{onInput(e){this.$emit("input",e)}}});const u={class:"cv-header"},c={class:"cv-header-nav"},p={class:"periodLabel"};h.render=function(e,a,r,i,n,s){return t.openBlock(),t.createBlock("div",u,[t.createVNode("div",c,[t.createVNode("button",{disabled:!e.headerProps.previousYear,class:"previousYear","aria-label":"Previous Year",onClick:a[1]||(a[1]=t.withModifiers((t=>e.onInput(e.headerProps.previousYear)),["prevent"]))},t.toDisplayString(e.previousYearLabel),9,["disabled"]),t.createVNode("button",{disabled:!e.headerProps.previousPeriod,class:"previousPeriod","aria-label":"Previous Period",onClick:a[2]||(a[2]=t.withModifiers((t=>e.onInput(e.headerProps.previousPeriod)),["prevent"])),innerHTML:e.previousPeriodLabel},null,8,["disabled","innerHTML"]),t.createVNode("button",{class:"currentPeriod","aria-label":"Current Period",onClick:a[3]||(a[3]=t.withModifiers((t=>e.onInput(e.headerProps.currentPeriod)),["prevent"]))},t.toDisplayString(e.headerProps.currentPeriodLabel),1),t.createVNode("button",{disabled:!e.headerProps.nextPeriod,class:"nextPeriod","aria-label":"Next Period",onClick:a[4]||(a[4]=t.withModifiers((t=>e.onInput(e.headerProps.nextPeriod)),["prevent"]))},t.toDisplayString(e.nextPeriodLabel),9,["disabled"]),t.createVNode("button",{disabled:!e.headerProps.nextYear,class:"nextYear","aria-label":"Next Year",onClick:a[5]||(a[5]=t.withModifiers((t=>e.onInput(e.headerProps.nextYear)),["prevent"]))},t.toDisplayString(e.nextYearLabel),9,["disabled"])]),t.createVNode("div",p,[t.renderSlot(e.$slots,"label",{},(()=>[t.createTextVNode(t.toDisplayString(e.headerProps.periodLabel),1)]))])])},e.CalendarMath=a,e.CalendarView=i,e.CalendarViewHeader=h,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));