calendar-vue-next
Version:
一款高效、简洁、功能丰富、宽度可自适应的 pc 端考勤日历插件
2 lines (1 loc) • 13.5 kB
JavaScript
(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.CalendarVueNext={},u.Vue))})(this,function(u,e){"use strict";const A={birthdayImg:"data:image/png;base64,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",sundayStart:!1,MonthDays:0,startDay:0,endDay:0,arrayPreNum:0,getMonthDays(t){const r=t.getFullYear(),s=t.getMonth()+1;return new Date(r,s,0).getDate()},init(t){const r=t.getFullYear(),s=t.getMonth();this.startDay=new Date(r,s,1).getDay();const i=new Date(r,s+1,0);return this.MonthDays=i.getDate(),this.endDay=i.getDay(),this.setArrayPreNum(),t},strToDateObj(t){if(typeof t=="string"&&(t=t.replace(/-/g,"/"),t=new Date(t),!(t instanceof Date&&!isNaN(t.getTime()))))throw"日期格式错误,格式为:YYYY-MM-DD";return t},setArrayPreNum(){const t=this.startDay;this.arrayPreNum=this.sundayStart?t===0?7:t:t===0?6:t-1},resetprevOrNextDateObj(t,r="next"){const s=this.dateFormatStr(t).split("/"),i=parseInt(s[0]),l=parseInt(s[1]);let c=i,a;r==="next"?(a=l+1,a==13&&(c+=1,a=1)):(a=l-1,a==0&&(c-=1,a=12));const h=`${c}/${a}/01`;return new Date(h)},getPrevMonthList(t){let r=[];const s=this.arrayPreNum,i=this.resetprevOrNextDateObj(t,"prev"),l=this.getMonthDays(i)-s+1;for(let c=0;c<s;c++){const a=l+c,h=`${i.getFullYear()}/${i.getMonth()+1}/${a}`;r.push({id:a,date:h,isToday:!1,whitchMonth:"prev"})}return r},getRightArr(t){let r=[];const s=this.resetprevOrNextDateObj(t,"next"),i=this.MonthDays+this.arrayPreNum;let l=7-i%7;i<35&&(l+=7);for(let c=0;c<l;c++){const a=c+1,h=`${s.getFullYear()}/${s.getMonth()+1}/${a}`;r.push({id:a,date:h,isToday:!1,whitchMonth:"next"})}return r},dateFormatStr(t){return`${t.getFullYear()}/${t.getMonth()+1}/${t.getDate()}`},getThisMonthList(t){const r=[],s=this.MonthDays,i=t.getFullYear(),l=t.getMonth()+1,c=this.dateFormatStr(new Date);for(let a=1;a<=s;a++){const h=`${i}/${l}/${a}`;r.push({id:a,date:h,isToday:c===h,whitchMonth:"current"})}return r},getMonthList(t){return t=this.init(t),[...this.getPrevMonthList(t),...this.getThisMonthList(t),...this.getRightArr(t)]}},v=[e.createElementVNode("i",{class:"ivcufont ivcu-cw_1"},null,-1)],N={class:"cv-popover-contentBox"},E=["innerHTML"],Q={key:1},O=e.defineComponent({__name:"template",props:{obj:{}},emits:["close"],setup(t,{emit:r}){const s=e.ref(!0),i=r,l=()=>{console.log("click"),s.value=!1,document.removeEventListener("keyup",c),i("close")},c=a=>{a.code=="Escape"&&l()};return e.onMounted(()=>{document.addEventListener("keyup",c)}),e.onUnmounted(()=>{l()}),(a,h)=>(e.openBlock(),e.createBlock(e.Transition,{name:"fade",appear:""},{default:e.withCtx(()=>[s.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"cv-popover-ivContainer",onKeyup:l},[e.createElementVNode("button",{class:"cv-popover-ivCloseBtn",onClick:l},v),e.createElementVNode("div",N,[a.obj.renderHtml?(e.openBlock(),e.createElementBlock("div",{key:0,innerHTML:a.obj.markContent},null,8,E)):(e.openBlock(),e.createElementBlock("p",Q,e.toDisplayString(a.obj.markContent),1))])],32)):e.createCommentVNode("",!0)]),_:1}))}});function V(){const t=e.ref(null);let r=null;function s(c,a){const h=e.h(O,{obj:a,onClose:()=>{console.log("emit"),l()}});e.createApp({render(){return h}}).mount(c)}const i=c=>{r=document.createElement("div"),s(r,c),document.body.appendChild(r)},l=()=>{r&&setTimeout(()=>{document.body.removeChild(r),r=null},300)};return{modalRef:t,showModal:i,hideModal:l}}const L={class:"cv-controlBox"},T={class:"cv-contentBox"},F={class:"cv-main"},S=["onMouseenter","onClick"],I=["onClick"],j=["src"],P=["onClick"],K=e.defineComponent({__name:"template",props:{min:{type:Boolean,default:!1},futureDisabled:{type:Boolean,default:!1},sundayStart:{type:Boolean,default:!1},titlebgColor:{default:"#f5f7fa"},titleColor:{default:"#333333"},weeklabelColor:{default:"#9da5b1"},arrowColor:{default:"#4b7df6"},itembgColor:{default:"#fff"},itemlabelColor:{default:"#333333"},birthdayImg:{default:A.birthdayImg},birthdaybgColor:{default:"#FFF5E7"},birthdaylabelColor:{default:"#333333"},crrentdaybgColor:{default:"#4b7df6"},crrentdaylabelColor:{default:"#fff"},clickdaybgColor:{default:"rgba(51, 51, 51,0.8)"},clickdaylabelColor:{default:"#fff"},hoverbgColor:{default:"#4b7df6"},hoverlabelColor:{default:"#fff"},prevColor:{default:"#cccccc"},nextColor:{default:"#cccccc"},markArr:{default:()=>[]},birthdayArr:{default:()=>[]}},emits:["onclickdate","onchangemonth"],setup(t,{expose:r,emit:s}){const{showModal:i}=V(),l=t,c=e.computed(()=>{let o=!1;if(l.futureDisabled){const d=new Date().getFullYear()+"."+new Date().getMonth(),n=A.strToDateObj(a.value);o=n.getFullYear()+"."+n.getMonth()>=d}return o}),a=e.ref(new Date),h=e.ref(null),m=e.ref(["一","二","三","四","五","六"]),k=e.ref(["一","二","三","四","五","六"]),f=e.ref([]),p=e.ref(null),b=s,C=()=>{f.value=A.getMonthList(a.value),D(),B()},D=()=>{f.value.forEach(o=>{o.mark=!1;let d=l.markArr.find(n=>A.dateFormatStr(new Date(n.date))===A.dateFormatStr(new Date(o.date)));d&&Object.assign(o,d,{mark:!0})})},B=()=>{f.value.forEach(o=>{const d=l.birthdayArr.some(n=>A.dateFormatStr(new Date(n))===o.date);Object.assign(o,{isBirthday:d})})},w=o=>{if(o==="next"&&l.futureDisabled&&c.value)return;const d=a.value;a.value=A.resetprevOrNextDateObj(d,o),b("onchangemonth",{day1:a.value,type:o}),C()},H=o=>{a.value=A.strToDateObj(o),C()},Y=o=>{a.value=A.strToDateObj(o),h.value=A.dateFormatStr(a.value),C()},M=o=>{i(o)},z=o=>{const d=o.date;h.value=d,console.log(o.whitchMonth),!(l.futureDisabled&&c.value)&&(o.whitchMonth!="current"&&H(d),b("onclickdate",o))},G=o=>`${o.getFullYear()}年-${o.getMonth()+1}月`,U=()=>{const o=l.sundayStart;A.sundayStart=o,o?k.value=["日",...m.value]:k.value=[...m.value,"日"],a.value=A.strToDateObj(a.value),C()},X=e.watch(()=>l.markArr,()=>{D()}),J=e.watch(()=>l.markArr,()=>{B()});return U(),e.onUnmounted(()=>{X(),J()}),r({jumpToDay:Y}),(o,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vue-calendar-ui",{"vue-calendar-small":o.min}])},[e.createElementVNode("div",L,[e.createElementVNode("div",{class:"cv-title",style:e.normalizeStyle({color:o.titleColor})},[e.createTextVNode(e.toDisplayString(G(a.value))+" ",1),e.createElementVNode("i",{class:e.normalizeClass(["ivcufont ivcu-arrowrightcircleyouyuanjiantou cv-arrowRight",{"cv-arrow-disabled":c.value}]),style:e.normalizeStyle({color:o.arrowColor}),onClick:d[0]||(d[0]=n=>w("next"))},null,6),e.createElementVNode("i",{class:"ivcufont ivcu-arrowleftcirclezuoyuanjiantou cv-arrowLeft",style:e.normalizeStyle({color:o.arrowColor}),onClick:d[1]||(d[1]=n=>w("prev"))},null,4)],4)]),e.createElementVNode("div",T,[e.createElementVNode("ul",{class:"cv-top",style:e.normalizeStyle({color:o.weeklabelColor})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(k.value,(n,g)=>(e.openBlock(),e.createElementBlock("li",{key:g,class:"cv-label"},e.toDisplayString(n),1))),128))],4),e.createElementVNode("ul",F,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f.value,(n,g)=>(e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass(["cv-item",{"cv-prev":n.whitchMonth==="prev","cv-next":n.whitchMonth==="next"}]),key:g},[e.createElementVNode("div",{class:e.normalizeClass(["cv-date",{"cv-today":n.isToday}]),style:e.normalizeStyle({"background-color":n.isBirthday?o.birthdaybgColor:n.isToday?o.crrentdaybgColor:n.date===h.value?o.clickdaybgColor:g===p.value?o.hoverbgColor:o.itembgColor,color:n.isBirthday?o.birthdaylabelColor:n.isToday?o.crrentdaylabelColor:n.date===h.value?o.clickdaylabelColor:g===p.value?o.hoverlabelColor:n.whitchMonth==="prev"?o.prevColor:n.whitchMonth==="next"?o.nextColor:o.itemlabelColor}),onMouseenter:y=>p.value=g,onMouseleave:d[2]||(d[2]=y=>p.value=null),onClick:y=>z(n)},[e.createTextVNode(e.toDisplayString(n.id)+" ",1),n.mark&&n.userPopover?(e.openBlock(),e.createElementBlock("span",{key:0,class:"cv-click-Box",onClick:y=>M(n)},null,8,I)):e.createCommentVNode("",!0),n.isBirthday?(e.openBlock(),e.createElementBlock("img",{key:1,class:"cv-today-birthday",src:o.birthdayImg,alt:""},null,8,j)):e.createCommentVNode("",!0)],46,S),n.mark?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["cv-circle",{"cv-circle-label":n.isLabel}]),style:e.normalizeStyle({"background-color":n.color,color:n.color})},[e.createTextVNode(e.toDisplayString(n.isLabel?n.label:null)+" ",1),n.mark&&n.userPopover?(e.openBlock(),e.createElementBlock("span",{key:0,class:"cv-click-Box",onClick:y=>M(n)},null,8,P)):e.createCommentVNode("",!0)],6)):e.createCommentVNode("",!0)],2))),128))])])],2))}}),R=((t,r)=>{const s=t.__vccOpts||t;for(const[i,l]of r)s[i]=l;return s})(K,[["__scopeId","data-v-87ce9da6"]]);function x(t){t.component("Calendar",R)}u.default=x,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});