vue3-mycalendar/dist/vue3-mycalendar.umd.js

A calendar and scheduling package for Vue 3

(function(d,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(d=typeof globalThis<"u"?globalThis:d||self,e(d.MyCalendar={},d.Vue))})(this,function(d,e){"use strict";const L={key:0,class:"popup"},T={class:"popup-content"},C={key:0},w={class:"button-container"},F=((E,g)=>{const a=E.__vccOpts||E;for(const[u,k]of g)a[u]=k;return a})(e.defineComponent({__name:"Popup",props:{visible:{type:Boolean},closeButtonText:{},eventData:{},popupFields:{}},emits:["close","handleDelete"],setup(E,{emit:g}){const a=E,u=g,k=e.computed(()=>a.popupFields||[]),m=e.computed(()=>a.eventData||{}),h=c=>c.replace(/_/g," ").replace(/\b\w/g,i=>i.toUpperCase()),y=e.computed(()=>k.value.length===0?m.value:Object.keys(m.value).filter(c=>k.value.includes(c)).reduce((c,i)=>(c[i]=m.value[i],c),{})),b=()=>{u("close")},f=()=>{u("handleDelete",m.value.id)};return(c,i)=>c.visible?(e.openBlock(),e.createElementBlock("div",L,[e.createElementVNode("div",T,[m.value&&Object.keys(m.value).length?(e.openBlock(),e.createElementBlock("div",C,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(y.value,(s,p)=>(e.openBlock(),e.createElementBlock("div",{key:p,class:"popup-field"},[e.createElementVNode("p",null,[e.createElementVNode("strong",null,e.toDisplayString(h(String(p)))+":",1),e.createTextVNode(" "+e.toDisplayString(s),1)])]))),128))])):e.renderSlot(c.$slots,"default",{key:1},void 0,!0),e.createElementVNode("div",w,[e.createElementVNode("button",{class:"close-button",onClick:b},e.toDisplayString(c.closeButtonText),1),e.createElementVNode("button",{class:"delete-button",onClick:f}," Delete ")])])])):e.createCommentVNode("",!0)}}),[["__scopeId","data-v-f2be054c"]]),M="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2050%2050'%20width='50px'%20height='50px'%3e%3cpath%20d='M%2025%202%20C%2012.309295%202%202%2012.309295%202%2025%20C%202%2037.690705%2012.309295%2048%2025%2048%20C%2037.690705%2048%2048%2037.690705%2048%2025%20C%2048%2012.309295%2037.690705%202%2025%202%20z%20M%2025%204%20C%2036.609824%204%2046%2013.390176%2046%2025%20C%2046%2036.609824%2036.609824%2046%2025%2046%20C%2013.390176%2046%204%2036.609824%204%2025%20C%204%2013.390176%2013.390176%204%2025%204%20z%20M%2025%2011%20A%203%203%200%200%200%2022%2014%20A%203%203%200%200%200%2025%2017%20A%203%203%200%200%200%2028%2014%20A%203%203%200%200%200%2025%2011%20z%20M%2021%2021%20L%2021%2023%20L%2022%2023%20L%2023%2023%20L%2023%2036%20L%2022%2036%20L%2021%2036%20L%2021%2038%20L%2022%2038%20L%2023%2038%20L%2027%2038%20L%2028%2038%20L%2029%2038%20L%2029%2036%20L%2028%2036%20L%2027%2036%20L%2027%2021%20L%2026%2021%20L%2022%2021%20L%2021%2021%20z'/%3e%3c/svg%3e",x=["for"],z={key:0},A=["id","onUpdate:modelValue"],W=["value"],$={key:1},I=["id","onUpdate:modelValue","type"],O={class:"form-group"},U={for:"start",class:"form-label"},P={class:"form-group"},q={for:"end",class:"form-label"},j={class:"form-group"},H={for:"date",class:"form-label"},Y=["disabled"],K={class:"calendar"},G={class:"navigation"},J={class:"current-week"},Q={class:"hours-and-days"},R={class:"hours"},X={class:"weekdays-container"},Z={class:"weekdays"},v={class:"days"},ee=["onClick"],te=["src"],V=e.defineComponent({__name:"ScheduleForm",props:{customClass:{},customStyles:{},schedules:{},additionalFields:{},weekdays:{},eventTitleColor:{},eventTitleSize:{},popupFields:{},labelsAndSettings:{}},emits:["submitEvent","handleDelete"],setup(E,{emit:g}){const a=E,u=g,k=e.computed(()=>a.weekdays||["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]),m=e.computed(()=>a.eventTitleColor||"#000"),h=e.computed(()=>a.eventTitleSize||"16px"),y=e.computed(()=>{var o,l,t,n,r;return{startTimeLabel:((o=a.labelsAndSettings)==null?void 0:o.startTimeLabel)||"Start Time",endTimeLabel:((l=a.labelsAndSettings)==null?void 0:l.endTimeLabel)||"End Time",dateLabel:((t=a.labelsAndSettings)==null?void 0:t.dateLabel)||"Date",submitButtonText:((n=a.labelsAndSettings)==null?void 0:n.submitButtonText)||"Add Entry",calendarWeekLabel:((r=a.labelsAndSettings)==null?void 0:r.calendarWeekLabel)||"CW"}}),b=e.ref(a.schedules),f=e.ref(a.additionalFields),c=e.ref(["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","23:00"]),i=e.ref({}),s=e.ref({start:"",end:"",date:"",color:""}),p=e.ref({visible:!1,event:{}}),_=e.ref(0),le=async()=>{const o={start:s.value.start,end:s.value.end,date:s.value.date,info:s.value.info,color:s.value.color};a.additionalFields.forEach(l=>{o[l.model]=s.value[l.model]}),u("submitEvent",o),Object.keys(s.value).forEach(l=>{s.value[l]=""})},oe=()=>{!f.value.length||!b.value.length||(i.value={},b.value.forEach(o=>{const l=o.date;i.value[l]||(i.value[l]=[]),i.value[l].push(o)}))};e.watchEffect(oe);const D=o=>{const l=new Date,t=l.getDay(),n=o+1-t+_.value*7,r=new Date(l);return r.setDate(l.getDate()+n),r.toISOString().substring(0,10)},ne=()=>{const o=new Date,l=new Date(o.getFullYear(),0,1),t=(o.getTime()-l.getTime())/864e5+_.value*7;return Math.ceil((t+l.getDay()+1)/7)},se=()=>_.value-=1,ae=()=>_.value+=1,re=o=>{const l=parseInt(o.start.substring(0,2)),t=parseInt(o.start.substring(3,5)),n=parseInt(o.end.substring(0,2)),r=parseInt(o.end.substring(3,5)),B=l*60+t,S=n*60+r,me=B*40/60;let N=(S-B)*40/60;return r===0&&(N+=40),{backgroundColor:o.color||"#a4d8ff",top:`${me}px`,height:`${N}px`,position:"absolute",left:0,right:0,zIndex:1}},ce=o=>{p.value.event=o,p.value.visible=!0},ie=()=>p.value.visible=!1,de=o=>{u("handleDelete",o)};return e.onMounted(()=>{a.additionalFields.forEach(o=>{s.value[o.model]=""})}),(o,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(o.customClass),style:e.normalizeStyle(o.customStyles)},[e.createElementVNode("form",{class:"form-container",onSubmit:e.withModifiers(le,["prevent"])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f.value,t=>(e.openBlock(),e.createElementBlock("div",{key:t.id,class:"form-group"},[e.createElementVNode("label",{for:t.id,class:"form-label"},e.toDisplayString(t.label)+":",9,x),t.type==="select"?(e.openBlock(),e.createElementBlock("div",z,[e.withDirectives(e.createElementVNode("select",{id:t.id,"onUpdate:modelValue":n=>s.value[t.model]=n,required:"",class:"form-select"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,n=>(e.openBlock(),e.createElementBlock("option",{key:n.id,value:n},e.toDisplayString(n.name||`${n.first_name} ${n.last_name}`),9,W))),128))],8,A),[[e.vModelSelect,s.value[t.model]]])])):(e.openBlock(),e.createElementBlock("div",$,[e.withDirectives(e.createElementVNode("input",{id:t.id,"onUpdate:modelValue":n=>s.value[t.model]=n,type:t.type,required:"",class:"form-input"},null,8,I),[[e.vModelDynamic,s.value[t.model]]])]))]))),128)),e.createElementVNode("div",O,[e.createElementVNode("label",U,e.toDisplayString(y.value.startTimeLabel||"Start Time")+":",1),e.withDirectives(e.createElementVNode("input",{id:"start","onUpdate:modelValue":l[0]||(l[0]=t=>s.value.start=t),type:"time",required:"",class:"form-input"},null,512),[[e.vModelText,s.value.start]])]),e.createElementVNode("div",P,[e.createElementVNode("label",q,e.toDisplayString(y.value.endTimeLabel||"End Time")+":",1),e.withDirectives(e.createElementVNode("input",{id:"end","onUpdate:modelValue":l[1]||(l[1]=t=>s.value.end=t),type:"time",required:"",class:"form-input"},null,512),[[e.vModelText,s.value.end]])]),e.createElementVNode("div",j,[e.createElementVNode("label",H,e.toDisplayString(y.value.dateLabel||"Date")+":",1),e.withDirectives(e.createElementVNode("input",{id:"date","onUpdate:modelValue":l[2]||(l[2]=t=>s.value.date=t),type:"date",required:"",class:"form-input"},null,512),[[e.vModelText,s.value.date]])]),e.createElementVNode("button",{type:"submit",disabled:!!i.value.processing,class:"submit-button"},e.toDisplayString(y.value.submitButtonText||"Add Entry"),9,Y)],32),e.createElementVNode("div",K,[e.createElementVNode("div",G,[e.createElementVNode("button",{class:"arrow-button",onClick:se},"<"),e.createElementVNode("span",J,e.toDisplayString(y.value.calendarWeekLabel||"CW")+" "+e.toDisplayString(ne()),1),e.createElementVNode("button",{class:"arrow-button",onClick:ae},">")]),e.createElementVNode("div",Q,[e.createElementVNode("div",R,[l[3]||(l[3]=e.createElementVNode("div",{class:"empty-slot"},null,-1)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,t=>(e.openBlock(),e.createElementBlock("div",{key:t,class:"hour"},e.toDisplayString(t),1))),128))]),e.createElementVNode("div",X,[e.createElementVNode("ul",Z,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(k.value,(t,n)=>(e.openBlock(),e.createElementBlock("li",{key:n,class:"weekday"},[e.createElementVNode("span",null,e.toDisplayString(t),1),e.createElementVNode("span",null,e.toDisplayString(D(n)),1)]))),128))]),e.createElementVNode("div",v,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(7,(t,n)=>e.createElementVNode("div",{key:n,class:"day"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,r=>(e.openBlock(),e.createElementBlock("div",{key:r,class:"hour"}))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value[D(n)]||[],(r,B)=>(e.openBlock(),e.createElementBlock("div",{key:r.id,class:"event",style:e.normalizeStyle(re(r))},[e.createElementVNode("span",{style:e.normalizeStyle({color:m.value,fontSize:h.value})},e.toDisplayString(r.title),5),l[4]||(l[4]=e.createElementVNode("br",null,null,-1)),e.createElementVNode("button",{class:"info-button",onClick:S=>ce(r)},[e.createElementVNode("img",{src:e.unref(M),alt:"my-logo",class:"small-logo"},null,8,te)],8,ee)],4))),128))])),64))])])])]),e.createVNode(F,{visible:p.value.visible,eventData:p.value.event,popupFields:o.popupFields,closeButtonText:"Close",onClose:ie,onHandleDelete:de},null,8,["visible","eventData","popupFields"])],6))}});d.ScheduleForm=V,d.default=V,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});