calendary.min.js

class Calendary{constructor(...t){this.tag=t[0],this.date=new Date((new Date).getFullYear(),(new Date).getMonth(),1),this.i18n=navigator.language,this.todayTitle="Today",this.day=new Date((new Date).getFullYear(),(new Date).getMonth(),(new Date).getDate()),"string"!=typeof t[0]&&(this.tag=t[0].tag,this.date=t[0].date?new Date(t[0].date):this.date,this.i18n=t[0].i18n||this.i18n,this.todayTitle=t[0].todayTitle||this.todayTitle),document.querySelectorAll(this.tag).forEach(t=>this.init(t)),document.addEventListener("click",t=>{const e=t.target;e.classList.contains("calendary--input")||e.closest(".calendary")?e.closest(".calendary")?this.floatUpdate(e):(this.floatClose(),this.floatBuild(e)):this.floatClose()})}init(t){t.constructor===HTMLInputElement?t.classList.add("calendary--input"):(this.build(t),this.update(t))}floatClose(){document.querySelector(".calendary__axis")&&(document.querySelector(".calendary__axis").remove(),document.querySelector(".calendary--focus").classList.remove("calendary--focus"))}floatUpdate(t){const e=document.querySelector(".calendary--focus"),a=this.day=new Date(this.date.getFullYear(),this.date.getMonth(),t.textContent);t.classList.contains("calendary__square-day")&&!t.classList.contains("calendary__inactive")&&("date"===e.type?(console.log(a.toLocaleString("zh-TW")),e.value=`${a.getFullYear()}-${a.toLocaleString("en",{month:"2-digit"})}-${a.toLocaleString("en",{day:"2-digit"})}`):e.value=a.toLocaleString(this.i18n,{year:"numeric",month:"2-digit",day:"2-digit"}),this.floatClose())}floatBuild(t){const e=t.getBoundingClientRect(),a=e.left<window.innerWidth/2?e.left:e.left+e.width,n=e.top<window.innerHeight/2?e.top+e.height:e.top,i=e.left<window.innerWidth/2?"left":"right",s=e.top<window.innerHeight/2?"top":"bottom";document.body.insertAdjacentHTML("beforeend",`<div class="calendary__axis" style="left: ${a}px;top: ${n+window.scrollY}px"><div class="calendary__float calendary__axis-${i} calendary__axis-${s}"></div></div>`);const l=document.querySelector(".calendary__float");this.build(l),this.update(l),t.classList.add("calendary--focus")}build(t){t.classList.add("calendary"),t.insertAdjacentHTML("beforeend",'<div class="calendary__header"><button class="calendary__button calendary__button-prev"></button><div class="calendary__year"></div><button class="calendary__button calendary__button-next"></button></div><div class="calendary__week"></div><div class="calendary__content"></div>');for(let e=0;e<7;e++)t.querySelector(".calendary__week").insertAdjacentHTML("beforeend",`<div class="calendary__square calendary__square-week">${new Date(0,0,e+1).toLocaleString(this.i18n,{weekday:"narrow"})}</div>`);for(let e=0;e<42;e++)t.querySelector(".calendary__content").insertAdjacentHTML("beforeend",'<div class="calendary__square calendary__square-day"></div>');t.querySelector(".calendary__button-prev").addEventListener("click",e=>this.prev(t)),t.querySelector(".calendary__button-next").addEventListener("click",e=>this.next(t))}update(t){const e=this.date.getDate()-this.date.getDay(),a=t.querySelector(".calendary__square-today");t.querySelector(".calendary__year").textContent=`${this.date.toLocaleString(this.i18n,{month:"long"})} ${this.date.getFullYear()}`,a&&(console.log(a),a.removeAttribute("title"),a.classList.remove("calendary__square-today")),this.classInactive=1;for(let a=0;a<42;a++){let n=new Date(this.date.getFullYear(),this.date.getMonth(),a+e),i=n.getDate(),s=t.querySelectorAll(".calendary__square-day")[a];s.classList.remove("calendary__inactive"),this.day.getTime()===n.getTime()&&(s.title=this.todayTitle,s.classList.add("calendary__square-today")),s.textContent=i,1===i&&(this.classInactive=this.classInactive?0:1),this.classInactive&&s.classList.add("calendary__inactive")}}next(t){this.date=new Date(this.date.getFullYear(),this.date.getMonth()+1,this.date.getDate()),this.update(t)}prev(t){this.date=new Date(this.date.getFullYear(),this.date.getMonth()-1,this.date.getDate()),this.update(t)}}