vue-simple-calendar
Version:
Simple Vue 3 calendar event control
2 lines (1 loc) • 17.8 kB
JavaScript
(function(p,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(p=typeof globalThis<"u"?globalThis:p||self,e(p.CalendarView={},p.Vue))})(this,function(p,e){"use strict";var rt=Object.defineProperty;var ot=(p,e,b)=>e in p?rt(p,e,{enumerable:!0,configurable:!0,writable:!0,value:b}):p[e]=b;var F=(p,e,b)=>ot(p,typeof e!="symbol"?e+"":e,b);const b=()=>L(new Date),ae=(t,i,n)=>{switch(i){case"year":return new Date(t.getFullYear(),0);case"month":return new Date(t.getFullYear(),t.getMonth());case"week":return N(t,n);default:return t}},ne=t=>[...Array(7)].map((i,n)=>M(t,n)),M=(t,i)=>new Date(t.getFullYear(),t.getMonth(),t.getDate()+i,t.getHours(),t.getMinutes(),t.getSeconds()),N=(t,i)=>M(t,(i-t.getDay()-7)%-7),re=(t,i)=>M(N(t,i),7),C=t=>new Date(t.getFullYear(),t.getMonth()),oe=t=>Math.ceil(t.getDate()/7),se=(t,i,n)=>new Date(t.getFullYear()+(i=="year"?n:0),t.getMonth()+(i=="month"?n:0),t.getDate()+(i=="week"?n*7:0)),Y=t=>("0"+String(t.getMonth()+1)).slice(-2),A=t=>("0"+String(t.getDate())).slice(-2),z=t=>t.getFullYear()+"-"+Y(t),ie=t=>z(t)+"-"+A(t),le=t=>Y(t)+"-"+A(t),de=(t,i,n)=>{if(t.getHours()===0&&t.getMinutes()===0&&t.getSeconds()===0)return"";if(!w()){var c=new Date().getTimezoneOffset()*6e4;return new Date(t.getTime()-c).toISOString().slice(11,16)}return t.toLocaleTimeString(i,n)},ce=(t,i,n,c)=>{const m=t.getFullYear()===i.getFullYear(),u=j(t,i),y=!(n==="year")&&!(n==="month");let f=[];return f.push(c[t.getMonth()]),y&&(f.push(" "),f.push(t.getDate())),m||(f.push(y?", ":" "),f.push(t.getFullYear())),!u||!m?(f.push(" – "),u||f.push(c[i.getMonth()]),y&&f.push(" ")):y&&f.push(" – "),y?(f.push(i.getDate()),f.push(", ")):f.push(" "),f.push(i.getFullYear()),f.join("")},R=(t,i)=>{const n=Date.UTC(i.getFullYear(),i.getMonth(),i.getDate()),c=Date.UTC(t.getFullYear(),t.getMonth(),t.getDate());return(n-c)/864e5},me=(t,i)=>!!t&&!!i&&R(t,i)===0,ue=(t,i)=>!!t&&!!i&&t.getTime()===i.getTime(),j=(t,i)=>!!t&&!!i&&t.getFullYear()===i.getFullYear()&&t.getMonth()===i.getMonth(),ge=t=>C(t)<C(b()),fe=t=>C(t)>C(b()),pe=t=>L(t)>b(),De=t=>L(t)<b(),he=t=>t.getMonth()!==M(t,7).getMonth(),be=t=>t.getMonth()!==M(t,1).getMonth(),q=t=>{let i=[...Array(7)].map(n=>0);return t.split(/\D/,7).forEach((n,c)=>i[c]=Number(n)),i[1]--,new Date(i[0],i[1],i[2],i[3],i[4],i[5],i[6])},W=t=>typeof t=="string"?q(t):new Date(t),L=t=>{const i=new Date(t);return i.setHours(0,0,0,0),i},ye=t=>t.substring(0,2),w=()=>typeof Intl<"u",r={addDays:M,beginningOfMonth:C,beginningOfPeriod:ae,beginningOfWeek:N,dateOnly:L,dayDiff:R,daysOfWeek:ne,endOfWeek:re,formattedPeriod:ce,formattedTime:de,fromIsoStringToLocalDate:q,getDefaultBrowserLocale:()=>typeof navigator>"u"?"unk":(navigator.languages&&navigator.languages.length?navigator.languages[0]:navigator.language).toLowerCase(),getFormattedMonthNames:(t,i)=>{if(!w())return[...Array(12)].map(c=>"");const n=new Intl.DateTimeFormat(t,{month:i});return[...Array(12)].map((c,m)=>n.format(new Date(2017,m,1)))},getFormattedWeekdayNames:(t,i,n)=>{if(!w())return[...Array(7)].map(m=>"");const c=new Intl.DateTimeFormat(t,{weekday:i});return[...Array(7)].map((m,u)=>c.format(new Date(2017,0,(u+1+n)%7)))},incrementPeriod:se,instanceOfMonth:oe,isFutureMonth:fe,isInFuture:pe,isInPast:De,isLastDayOfMonth:be,isLastInstanceOfMonth:he,isoMonthDay:le,isoYearMonth:z,isoYearMonthDay:ie,isPastMonth:ge,isSameDate:me,isSameDateTime:ue,isSameMonth:j,languageCode:ye,normalizeItem:(t,i)=>{const n=t.classes?[...t.classes]:[];return i&&n.push("isHovered"),{originalItem:t,startDate:W(t.startDate),endDate:W(t.endDate||t.startDate),classes:n,title:t.title||"Untitled",id:t.id,url:t.url,tooltip:t.tooltip??t.title}},paddedDay:A,paddedMonth:Y,supportsIntl:w,today:b,toLocalDate:W};class ke{constructor(){F(this,"currentDragItem");F(this,"dateSelectionOrigin");F(this,"currentHoveredItemId","");F(this,"CalendarMath",r)}}const Pe={class:"cv-header-days"},Me={key:0,class:"cv-weeknumber"},Se=["aria-multiselectable"],Ce={key:0,class:"cv-weeknumber"},Ie={class:"cv-weekdays"},Oe=["draggable","aria-grabbed","aria-label","aria-selected","aria-dropeffect","onClick","onDragstart","onDrop","onDragover","onDragenter","onDragleave"],Fe={class:"cv-day-number"},Le={key:0,class:"cv-fom-name"},we=["draggable","aria-grabbed","title","onDragstart","onMouseenter","onMouseleave","onClick","innerHTML"],Be=["draggable","aria-grabbed","title","onDragstart","onMouseenter","onMouseleave","onClick"],Te=e.defineComponent({__name:"CalendarView",props:{showDate:{default:void 0},displayPeriodUom:{default:"month"},displayPeriodCount:{default:1},displayWeekNumbers:{type:Boolean,default:!1},locale:{default:void 0},monthNameFormat:{default:"long"},weekdayNameFormat:{default:"short"},showTimes:{type:Boolean,default:!1},timeFormatOptions:{default:()=>({})},disablePast:{type:Boolean,default:!1},disableFuture:{type:Boolean,default:!1},enableDateSelection:{type:Boolean,default:!1},selectionStart:{default:void 0},selectionEnd:{default:void 0},enableDragDrop:{type:Boolean,default:!1},startingDayOfWeek:{default:0},items:{default:()=>[]},dateClasses:{default:()=>({})},itemTop:{default:"1.4em"},itemContentHeight:{default:"1.4em"},itemBorderHeight:{default:"2px"},periodChangedCallback:{type:Function,default:void 0},currentPeriodLabel:{default:""},currentPeriodLabelIcons:{default:"⇤-⇥"},enableTooltip:{type:Boolean,default:!0},doEmitItemMouseEvents:{type:Boolean,default:!1},enableHtmlTitles:{type:Boolean,default:!0},monthNameOn1st:{type:Boolean,default:!0}},emits:["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"],setup(t,{emit:i}){const n=t,c=i,m=e.reactive(new ke),u=e.computed(()=>n.locale||r.getDefaultBrowserLocale()),k=e.computed(()=>n.showDate?r.dateOnly(n.showDate):r.today()),D=e.computed(()=>r.beginningOfPeriod(k.value,n.displayPeriodUom,n.startingDayOfWeek)),y=e.computed(()=>r.addDays(r.incrementPeriod(D.value,n.displayPeriodUom,n.displayPeriodCount),-1)),f=e.computed(()=>{const a=new Date(D.value.getFullYear(),0,1),s=r.addDays(a,(11-a.getDay())%7),l=r.beginningOfPeriod(s,"week",n.startingDayOfWeek),g=r.beginningOfWeek(D.value,n.startingDayOfWeek);return 1+Math.floor(r.dayDiff(l,g)/7)}),B=e.computed(()=>r.beginningOfWeek(D.value,n.startingDayOfWeek)),V=e.computed(()=>r.endOfWeek(y.value,n.startingDayOfWeek)),ve=e.computed(()=>{const a=Math.floor((r.dayDiff(B.value,V.value)+1)/7);return[...Array(a)].map((s,l)=>r.addDays(B.value,l*7))}),T=e.computed(()=>r.getFormattedMonthNames(u.value,n.monthNameFormat)),Ue=e.computed(()=>r.getFormattedWeekdayNames(u.value,n.weekdayNameFormat,n.startingDayOfWeek)),H=e.computed(()=>n.items?n.items.map(a=>r.normalizeItem(a,a.id===m.currentHoveredItemId)):[]),v=e.computed(()=>r.beginningOfPeriod(r.today(),n.displayPeriodUom,n.startingDayOfWeek)),ze=e.computed(()=>r.addDays(r.incrementPeriod(v.value,n.displayPeriodUom,n.displayPeriodCount),-1)),Re=e.computed(()=>r.formattedPeriod(D.value,y.value,n.displayPeriodUom,T.value)),je=e.computed(()=>{const a=v.value,s=D.value;return n.currentPeriodLabel?n.currentPeriodLabel==="icons"?n.currentPeriodLabelIcons[Math.sign(a.getTime()-s.getTime())+1]:n.currentPeriodLabel:r.formattedPeriod(a,ze.value,n.displayPeriodUom,T.value)}),qe=e.computed(()=>n.monthNameOn1st&&(n.displayPeriodUom!=="month"||n.displayPeriodCount>1)),G=a=>qe.value&&a.getDate()==1?T.value[a.getMonth()]:"",Ge=e.computed(()=>({previousYear:S(-12),previousPeriod:S(-1),nextPeriod:S(1),previousFullPeriod:S(-n.displayPeriodCount),nextFullPeriod:S(n.displayPeriodCount),nextYear:S(12),currentPeriod:v.value,currentPeriodLabel:je.value,periodStart:D.value,periodEnd:y.value,displayLocale:u.value,displayFirstDate:B.value,displayLastDate:V.value,monthNames:T.value,fixedItems:H.value,periodLabel:Re.value})),Qe=e.computed(()=>({periodStart:D,periodEnd:y,displayFirstDate:B,displayLastDate:V}));e.watch(()=>Qe,a=>{n.periodChangedCallback&&(c("period-changed"),n.periodChangedCallback(a,"watch"))},{immediate:!0,deep:!0});const Je=(a,s)=>{n.disablePast&&r.isInPast(a)||n.disableFuture&&r.isInFuture(a)||c("click-date",a,Z(a,a),s)},Q=(a,s)=>c("click-item",a,s),I=a=>"dow"+(a+n.startingDayOfWeek)%7,S=a=>{const s=r.incrementPeriod(D.value,n.displayPeriodUom,a),l=r.incrementPeriod(s,n.displayPeriodUom,n.displayPeriodCount);return n.disablePast&&l<=r.today()||n.disableFuture&&s>r.today()?null:s},J=(a,s)=>{m.currentHoveredItemId=a.id,n.doEmitItemMouseEvents&&c("item-mouseenter",a,s)},K=(a,s)=>{m.currentHoveredItemId="",n.doEmitItemMouseEvents&&c("item-mouseleave",a,s)},Ke=(a,s)=>{var g,o;if(!n.enableDateSelection)return!1;(g=s.dataTransfer)==null||g.setData("text",a.toString());let l=new Image;return l.src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==",(o=s.dataTransfer)==null||o.setDragImage(l,10,10),m.dateSelectionOrigin=a,c("date-selection-start",U(a),s),!0},X=(a,s)=>{var l;return n.enableDragDrop?((l=s.dataTransfer)==null||l.setData("text",a.id),m.currentDragItem=a,m.dateSelectionOrigin=void 0,c("drag-start",a,s),!0):!1},U=a=>a<=m.dateSelectionOrigin?[a,m.dateSelectionOrigin]:[m.dateSelectionOrigin,a],Xe=(a,s)=>{n.enableDragDrop&&c("drag-over-date",m.currentDragItem,a,s)},Ze=(a,s)=>{if(n.enableDateSelection&&m.dateSelectionOrigin&&c("date-selection",U(a),s),!n.enableDragDrop)return;c("drag-enter-date",m.currentDragItem,a,s),s.target.classList.add("draghover")},xe=(a,s)=>{if(n.enableDateSelection&&n.selectionStart||!n.enableDragDrop)return;c("drag-leave-date",m.currentDragItem,a,s),s.target.classList.remove("draghover")},_e=(a,s)=>{if(n.enableDateSelection&&m.dateSelectionOrigin){c("date-selection-finish",U(a),s);return}if(!n.enableDragDrop)return;c("drop-on-date",m.currentDragItem,a,s),s.target.classList.remove("draghover")},et=(a,s)=>a.startDate<s.startDate?-1:s.startDate<a.startDate?1:a.endDate>s.endDate?-1:s.endDate>a.endDate?1:a.id<s.id?-1:1,tt=a=>Z(a,r.addDays(a,6)),Z=(a,s)=>H.value.filter(l=>l.endDate>=a&&r.dateOnly(l.startDate)<=s,this).sort(et),at=a=>!!H.value.find(s=>s.endDate>=a&&r.dateOnly(s.startDate)<=a),x=a=>!(!n.selectionStart||!n.selectionEnd||a<r.dateOnly(n.selectionStart)||a>r.dateOnly(n.selectionEnd)),_=a=>{const s=tt(a),l=[],g=[[],[],[],[],[],[],[]];if(!s)return l;for(let o=0;o<s.length;o++){const d=Object.assign({},s[o],{classes:[...s[o].classes],itemRow:0}),h=d.startDate<a,O=h?0:r.dayDiff(a,d.startDate),te=Math.max(1,Math.min(7-O,r.dayDiff(r.addDays(a,O),d.endDate)+1));h&&d.classes.push("continued"),r.dayDiff(a,d.endDate)>6&&d.classes.push("toBeContinued"),r.isInPast(d.endDate)&&d.classes.push("past"),d.originalItem.url&&d.classes.push("hasUrl");for(let P=0;P<7;P++)if(P===O){let E=0;for(;g[P][E];)E++;d.itemRow=E,g[P][E]=!0}else P<O+te&&(g[P][d.itemRow]=!0);d.classes.push(`offset${O}`),d.classes.push(`span${te}`),l.push(d)}return l},nt=a=>{const s='<span class="startTime">'+r.formattedTime(a.startDate,u.value,n.timeFormatOptions)+"</span>";let l="";return r.isSameDateTime(a.startDate,a.endDate)||(l='<span class="endTime">'+r.formattedTime(a.endDate,u.value,n.timeFormatOptions)+"</span>"),s+l},ee=a=>n.showTimes?nt(a)+" "+a.title:a.title,$=a=>{const s=a.itemRow,l=n.itemContentHeight,g=n.itemBorderHeight;return`calc(${n.itemTop} + ${s}*${l} + ${s}*${g})`};return(a,s)=>(e.openBlock(),e.createElementBlock("div",{"aria-label":"Calendar",class:e.normalizeClass(["cv-wrapper",`locale-${e.unref(r).languageCode(u.value)}`,`locale-${u.value}`,`y${D.value.getFullYear()}`,`m${e.unref(r).paddedMonth(D.value)}`,`period-${a.displayPeriodUom}`,`periodCount-${a.displayPeriodCount}`,{past:e.unref(r).isPastMonth(D.value),future:e.unref(r).isFutureMonth(D.value),noIntl:!e.unref(r).supportsIntl}])},[e.renderSlot(a.$slots,"header",{headerProps:Ge.value}),e.createElementVNode("div",Pe,[a.displayWeekNumbers?(e.openBlock(),e.createElementBlock("div",Me)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Ue.value,(l,g)=>e.renderSlot(a.$slots,"day-header",{index:I(g),label:l},()=>[(e.openBlock(),e.createElementBlock("div",{key:I(g),class:e.normalizeClass([I(g),"cv-header-day"])},e.toDisplayString(l),3))])),256))]),e.createElementVNode("div",{"aria-multiselectable":a.enableDateSelection,class:"cv-weeks"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(ve.value,(l,g)=>(e.openBlock(),e.createElementBlock("div",{key:`${g}-week`,class:e.normalizeClass(["cv-week",`week${g+1}`,`ws${e.unref(r).isoYearMonthDay(l)}`])},[a.displayWeekNumbers?(e.openBlock(),e.createElementBlock("div",Ce,[e.renderSlot(a.$slots,"week-number",{date:l,numberInYear:f.value+g,numberInPeriod:g+1},()=>[e.createElementVNode("span",null,e.toDisplayString(f.value+g),1)])])):e.createCommentVNode("",!0),e.createElementVNode("div",Ie,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(r).daysOfWeek(l),(o,d)=>(e.openBlock(),e.createElementBlock("div",{key:I(d),draggable:a.enableDateSelection,class:e.normalizeClass(["cv-day",I(d),`d${e.unref(r).isoYearMonthDay(o)}`,`d${e.unref(r).isoMonthDay(o)}`,`d${e.unref(r).paddedDay(o)}`,`instance${e.unref(r).instanceOfMonth(o)}`,{today:e.unref(r).isSameDate(o,e.unref(r).today()),outsideOfMonth:!e.unref(r).isSameMonth(o,k.value),past:e.unref(r).isInPast(o),future:e.unref(r).isInFuture(o),last:e.unref(r).isLastDayOfMonth(o),lastInstance:e.unref(r).isLastInstanceOfMonth(o),hasItems:at(o),selectionStart:e.unref(r).isSameDate(o,a.selectionStart),selectionEnd:e.unref(r).isSameDate(o,a.selectionEnd)},...a.dateClasses&&a.dateClasses[e.unref(r).isoYearMonthDay(o)]||[]]),"aria-grabbed":a.enableDateSelection?x(o):void 0,"aria-label":o.getDate().toString(),"aria-selected":x(o),"aria-dropeffect":a.enableDragDrop&&m.currentDragItem?"move":a.enableDateSelection&&m.dateSelectionOrigin?"execute":"none",onClick:h=>Je(o,h),onDragstart:h=>Ke(o,h),onDrop:e.withModifiers(h=>_e(o,h),["prevent"]),onDragover:e.withModifiers(h=>Xe(o,h),["prevent"]),onDragenter:e.withModifiers(h=>Ze(o,h),["prevent"]),onDragleave:e.withModifiers(h=>xe(o,h),["prevent"])},[e.createElementVNode("div",Fe,[G(o)?(e.openBlock(),e.createElementBlock("span",Le,e.toDisplayString(G(o)),1)):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(o.getDate()),1)]),e.renderSlot(a.$slots,"day-content",{day:o})],42,Oe))),128)),n.enableHtmlTitles?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(_(l),o=>e.renderSlot(a.$slots,"item",{value:o,weekStartDate:l,top:$(o)},()=>[(e.openBlock(),e.createElementBlock("div",{key:o.id,draggable:a.enableDragDrop,"aria-grabbed":a.enableDragDrop?o==m.currentDragItem:void 0,class:e.normalizeClass([o.classes,"cv-item"]),title:a.enableTooltip?o.tooltip||o.title:void 0,style:e.normalizeStyle(`top:${$(o)};${o.originalItem.style}`),onDragstart:d=>X(o,d),onMouseenter:d=>J(o,d),onMouseleave:d=>K(o,d),onClick:e.withModifiers(d=>Q(o,d),["stop"]),innerHTML:ee(o)},null,46,we))])),256)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(_(l),o=>e.renderSlot(a.$slots,"item",{value:o,weekStartDate:l,top:$(o)},()=>[(e.openBlock(),e.createElementBlock("div",{key:o.id,draggable:a.enableDragDrop,"aria-grabbed":a.enableDragDrop?o==m.currentDragItem:void 0,class:e.normalizeClass([o.classes,"cv-item"]),title:a.enableTooltip?o.tooltip||o.title:void 0,style:e.normalizeStyle(`top:${$(o)};${o.originalItem.style}`),onDragstart:d=>X(o,d),onMouseenter:d=>J(o,d),onMouseleave:d=>K(o,d),onClick:e.withModifiers(d=>Q(o,d),["stop"])},e.toDisplayString(a.enableTooltip??"p")+" "+e.toDisplayString(ee(o)),47,Be)),s[0]||(s[0]=e.createTextVNode(" div> "))])),256))])],2))),128))],8,Se)],2))}}),$e={class:"cv-header"},Ee={class:"cv-header-nav"},Ne=["disabled"],Ye=["disabled","innerHTML"],Ae=["disabled"],We=["disabled"],Ve={class:"periodLabel"},He=e.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"],setup(t,{emit:i}){const n=i,c=m=>n("input",m);return(m,u)=>(e.openBlock(),e.createElementBlock("div",$e,[e.createElementVNode("div",Ee,[e.createElementVNode("button",{disabled:!t.headerProps.previousYear,class:"previousYear","aria-label":"Previous Year",onClick:u[0]||(u[0]=e.withModifiers(k=>c(t.headerProps.previousYear),["prevent"]))},e.toDisplayString(t.previousYearLabel),9,Ne),e.createElementVNode("button",{disabled:!t.headerProps.previousPeriod,class:"previousPeriod","aria-label":"Previous Period",onClick:u[1]||(u[1]=e.withModifiers(k=>c(t.headerProps.previousPeriod),["prevent"])),innerHTML:t.previousPeriodLabel},null,8,Ye),e.createElementVNode("button",{class:"currentPeriod","aria-label":"Current Period",onClick:u[2]||(u[2]=e.withModifiers(k=>c(t.headerProps.currentPeriod),["prevent"]))},e.toDisplayString(t.headerProps.currentPeriodLabel),1),e.createElementVNode("button",{disabled:!t.headerProps.nextPeriod,class:"nextPeriod","aria-label":"Next Period",onClick:u[3]||(u[3]=e.withModifiers(k=>c(t.headerProps.nextPeriod),["prevent"]))},e.toDisplayString(t.nextPeriodLabel),9,Ae),e.createElementVNode("button",{disabled:!t.headerProps.nextYear,class:"nextYear","aria-label":"Next Year",onClick:u[4]||(u[4]=e.withModifiers(k=>c(t.headerProps.nextYear),["prevent"]))},e.toDisplayString(t.nextYearLabel),9,We)]),e.createElementVNode("div",Ve,[e.renderSlot(m.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.headerProps.periodLabel),1)])])]))}});p.CalendarMath=r,p.CalendarView=Te,p.CalendarViewHeader=He,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});