color-calendar - npm Package Compare versions

Comparing version 0.0.1 to 1.0.0

dist/bundle.cjs.js

 /**
  * color-calendar
- * v0.0.1
- * by Pawan Kolhe <[e-mail]>
+ * v1.0.0
+ * by Pawan Kolhe <[e-mail]> (https://pawankolhe.com/)
  */
 
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.Calendar=class{constructor({id:e="#calendar",weekdayType:t="short",monthDisplayType:a="long",eventsData:n=[],dayClicked:r,monthChanged:s,dateChanged:d,startWeekday:i=0,theme:l="basic",color:h,fontFamily1:o,fontFamily2:c,headerColor:y,headerBackgroundColor:D,dropShadow:_=!0,border:u=!0}={}){switch(this.monthDisplayType=a,this.DAYS_TO_DISPLAY=42,t){case"long":this.WEEKDAYS=["SUN","MON","TUE","WED","THU","FRI","SAT"];break;case"long-lower":this.WEEKDAYS=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];break;default:this.WEEKDAYS=["S","M","T","W","T","F","S"]}this.id=e,this.START_WEEKDAY=i,this.eventsData=n,this.eventDayMap={},this.oldSelectedNode=null,this.filteredEventsThisMonth=null,this.dayClicked=r,this.monthChanged=s,this.dateChanged=d,this.theme=l,this.color=h,this.fontFamily1=o,this.fontFamily2=c,this.dropShadow=_,this.border=u,this.headerColor=y,this.headerBackgroundColor=D,this.today=new Date,this.currentDate=new Date,this.selectedDate=new Date,this.clearCalendarDays(),this.resetCalendar()}resetCalendar(){this.initializeLayout(),this.updateMonthYear(),this.generateWeekdays(),this.generateDays(),this.selectDayInitial(),this.renderDays(),this.setOldSelectedNode()}initializeLayout(){this.calendar=document.querySelector(this.id),this.calendar.innerHTML=`\n      <div class="calendar ${this.theme}">\n        <div class="calendar__header">\n          <div class="calendar__arrow calendar__arrow-prev"><div class="calendar__arrow-inner"></div></div>\n          <div class="calendar__month"></div>\n          <div class="calendar__arrow calendar__arrow-next"><div class="calendar__arrow-inner"></div></div>\n        </div>\n        <div class="calendar__body">\n          <div class="calendar__weekdays"></div>\n          <div class="calendar__days"></div>\n        </div>\n      </div>\n    `,this.configureStylePreferences(),this.calendarMonthYear=document.querySelector(this.id+" .calendar__month"),this.calendarWeekdays=document.querySelector(this.id+" .calendar__weekdays"),this.calendarDays=document.querySelector(this.id+" .calendar__days"),this.prevButton=document.querySelector(this.id+" .calendar__arrow-prev .calendar__arrow-inner"),this.nextButton=document.querySelector(this.id+" .calendar__arrow-next .calendar__arrow-inner"),this.prevButton.addEventListener("click",this.handlePrevMonthButtonClick.bind(this)),this.nextButton.addEventListener("click",this.handleNextMonthButtonClick.bind(this)),this.calendarDays.addEventListener("click",this.handleCalendarDayClick.bind(this))}configureStylePreferences(){let e=document.querySelector(this.id+" .calendar");this.color&&e.style.setProperty("--cal-color-primary",this.color),this.fontFamily1&&e.style.setProperty("--cal-font-family-1",this.fontFamily1),this.fontFamily2&&e.style.setProperty("--cal-font-family-2",this.fontFamily2),this.dropShadow||e.style.setProperty("--cal-drop-shadow","none"),this.border||e.style.setProperty("--cal-border","none"),this.headerColor&&e.style.setProperty("--cal-header-color",this.headerColor),this.headerBackgroundColor&&e.style.setProperty("--cal-header-background-color",this.headerBackgroundColor)}clearCalendarDays(){this.daysIn_PrevMonth=[],this.daysIn_CurrentMonth=[],this.daysIn_NextMonth=[]}updateCalendar(e){e&&(this.updateMonthYear(),this.clearCalendarDays(),this.generateDays(),this.selectDayInitial()),this.renderDays(),e&&this.setOldSelectedNode()}setOldSelectedNode(){if(!this.oldSelectedNode){let e;for(let t=1;t<this.calendarDays.childNodes.length;t+=2){let a=this.calendarDays.childNodes[t];if(a.classList&&a.classList.contains("calendar__day-active")&&a.innerText===this.currentDate.getDate().toString()){e=a;break}}this.oldSelectedNode=[e,parseInt(e.innerText)]}}selectDayInitial(){let e=this.today.getMonth()===this.currentDate.getMonth(),t=this.today.getDate()===this.currentDate.getDate();e&&t?this.daysIn_CurrentMonth[this.today.getDate()-1].selected=!0:this.daysIn_CurrentMonth[0].selected=!0}getEventsData(){return JSON.parse(JSON.stringify(this.eventsData))}setEventsData(e){return this.eventsData=JSON.parse(JSON.stringify(e)),this.updateCalendar(),this.eventsData}addEventsData(e){const t=this.eventsData.push(...e);return this.updateCalendar(),t}handleCalendarDayClick(e){if(!(e.target.classList.contains("calendar__day-box")||e.target.classList.contains("calendar__day-text")||e.target.classList.contains("calendar__day-box-today")||e.target.classList.contains("calendar__day-bullet"))||e.target.parentElement.classList.contains("calendar__day-selected"))return;if(this.oldSelectedNode&&!this.oldSelectedNode[0].previousElementSibling)return;let t,a;if(t=e.target.parentElement.innerText,a=parseInt(t,10),this.oldSelectedNode&&(Object.assign(this.daysIn_CurrentMonth[this.oldSelectedNode[1]-1],{selected:!1}),this.rerenderSelectedDay(this.oldSelectedNode[0],this.oldSelectedNode[1])),t){this.updateCurrentDate(0,a),Object.assign(this.daysIn_CurrentMonth[a-1],{selected:!0}),this.rerenderSelectedDay(e.target.parentElement,a,!0);let t=this.filteredEventsThisMonth.filter(e=>{const t=new Date(e.start).getDate(),a=new Date(e.end).getDate();return this.currentDate.getDate()>=t&&this.currentDate.getDate()<=a});this.dayClicked&&this.dayClicked(t)}}handlePrevMonthButtonClick(){this.updateCurrentDate(-1)}handleNextMonthButtonClick(){this.updateCurrentDate(1)}resetCurrentDate(){this.updateCurrentDate(0)}updateCurrentDate(e,t,a){this.currentDate=new Date(this.currentDate.getFullYear(),a?this.today.getMonth():this.currentDate.getMonth()+e,0===e&&t?t:1),0!==e?(this.updateCalendar(!0),this.monthChanged&&this.monthChanged(this.ISODateUTCToLocal(this.currentDate))):this.dateChanged&&this.dateChanged(this.ISODateUTCToLocal(this.currentDate))}ISODateUTCToLocal(e){const t=6e4*e.getTimezoneOffset();return new Date(Date.now()-t).toISOString().slice(0,-1)}updateMonthYear(){this.oldSelectedNode=null,this.calendarMonthYear.innerHTML=`\n      ${new Intl.DateTimeFormat("default",{month:this.monthDisplayType}).format(this.currentDate)} ${this.currentDate.getFullYear()}\n    `}generateWeekdays(){this.calendarWeekdays.innerHTML="";for(let e=0;e<7;e++)this.calendarWeekdays.innerHTML+=`\n        <div class="calendar__weekday">${this.WEEKDAYS[(e+this.START_WEEKDAY)%7]}</div>\n      `}generateDays(){this.numOfDays_PrevMonth=new Date(this.currentDate.getFullYear(),this.currentDate.getMonth(),0).getDate(),this.firstDay_CurrentMonth=new Date(this.currentDate.getFullYear(),this.currentDate.getMonth(),1).getDay(),this.numOfDays_CurrentMonth=new Date(this.currentDate.getFullYear(),this.currentDate.getMonth()+1,0).getDate();for(let e=0;e<this.numOfDays_CurrentMonth;e++)this.daysIn_CurrentMonth.push({day:e+1,selected:!1})}renderDays(){this.calendarDays.innerHTML="";let e=0;const t=this.currentDate.getMonth();let a;this.filteredEventsThisMonth=this.eventsData.filter(e=>new Date(e.start).getMonth()===t),this.eventDayMap={},this.filteredEventsThisMonth.forEach(e=>{const t=new Date(e.start).getDate(),a=new Date(e.end).getDate();for(let e=t;e<=a;e++)this.eventDayMap[e]=!0}),a=this.firstDay_CurrentMonth<this.START_WEEKDAY?7+this.firstDay_CurrentMonth-this.START_WEEKDAY:this.firstDay_CurrentMonth-this.START_WEEKDAY;for(let t=0;t<a;t++)this.calendarDays.innerHTML+=`\n        <div class="calendar__day calendar__day-other">${this.numOfDays_PrevMonth+1-a+t}</div>\n      `,e++;let n=this.today.getMonth()===this.currentDate.getMonth();this.daysIn_CurrentMonth.forEach(t=>{let a=n&&t.day===this.today.getDate();this.calendarDays.innerHTML+=`\n        <div class="calendar__day calendar__day-active${a?" calendar__day-today":""}${this.eventDayMap[t.day]?" calendar__day-event":" calendar__day-no-event"}${t.selected?" calendar__day-selected":""}">\n          <span class="calendar__day-text">${t.day}</span>\n          <div class="calendar__day-box"></div>\n          <div class="calendar__day-bullet"></div>\n          ${a?'<div class="calendar__day-box-today"></div>':""}\n        </div>\n      `,e++});for(let t=0;t<this.DAYS_TO_DISPLAY-e;t++)this.calendarDays.innerHTML+=`\n        <div class="calendar__day calendar__day-other">${t+1}</div>\n      `}rerenderSelectedDay(e,t,a){let n=e.previousElementSibling;e.remove(e);let r=this.today.getMonth()===this.currentDate.getMonth()&&t===this.today.getDate(),s=document.createElement("div");s.className+=`calendar__day calendar__day-active${r?" calendar__day-today":""}${this.eventDayMap[t]?" calendar__day-event":" calendar__day-no-event"}${this.daysIn_CurrentMonth[t-1].selected?" calendar__day-selected":""}`,s.innerHTML=`\n      <span class="calendar__day-text">${t}</span>\n      <div class="calendar__day-box"></div>\n      <div class="calendar__day-bullet"></div>\n      ${r?'<div class="calendar__day-box-today"></div>':""}\n    `,n.parentElement.insertBefore(s,n.nextSibling),a&&(this.oldSelectedNode=[s,t])}};
+"use strict";module.exports=class{constructor(e={}){var t,a,i,r,n,s,d;switch(this.CAL_NAME="color-calendar",this.DAYS_TO_DISPLAY=42,this.id=null!==(t=e.id)&&void 0!==t?t:"#calendar",this.monthDisplayType=null!==(a=e.monthDisplayType)&&void 0!==a?a:"long",this.eventsData=null!==(i=e.eventsData)&&void 0!==i?i:[],this.startWeekday=null!==(r=e.startWeekday)&&void 0!==r?r:0,this.theme=null!==(n=e.theme)&&void 0!==n?n:"basic",this.primaryColor=e.primaryColor,this.fontFamilyHeader=e.fontFamilyHeader,this.fontFamilyWeekdays=e.fontFamilyWeekdays,this.fontFamilyBody=e.fontFamilyBody,this.dropShadow=null===(s=e.dropShadow)||void 0===s||s,this.border=e.border,this.borderRadius=e.borderRadius,this.headerColor=e.headerColor,this.headerBackgroundColor=e.headerBackgroundColor,this.weekdaysColor=e.weekdaysColor,this.monthChanged=e.monthChanged,this.dateChanged=e.dateChanged,this.weekdayType=null!==(d=e.weekdayType)&&void 0!==d?d:"long",this.weekdayType){case"short":this.weekdays=["S","M","T","W","T","F","S"];break;case"long-lower":this.weekdays=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];break;case"long-upper":this.weekdays=["SUN","MON","TUE","WED","THU","FRI","SAT"];break;default:this.weekdays=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]}if(this.today=new Date,this.currentDate=new Date,this.pickerType="month",this.eventDayMap={},this.oldSelectedNode=null,this.filteredEventsThisMonth=[],this.daysIn_PrevMonth=[],this.daysIn_CurrentMonth=[],this.daysIn_NextMonth=[],this.firstDay_PrevMonth=0,this.firstDay_CurrentMonth=0,this.firstDay_NextMonth=0,this.numOfDays_PrevMonth=0,this.numOfDays_CurrentMonth=0,this.numOfDays_NextMonth=0,this.yearPickerOffset=0,this.yearPickerOffsetTemporary=0,this.calendar=document.querySelector(this.id),!this.calendar)throw new Error(`Element with selector '${this.id}' not found`);this.calendar.innerHTML=`\n      <div class="${this.CAL_NAME} ${this.theme}">\n        <div class="calendar__header">\n          <div class="calendar__arrow calendar__arrow-prev"><div class="calendar__arrow-inner"></div></div>\n          <div class="calendar__monthyear">\n            <span class="calendar__month"></span>&nbsp;\n            <span class="calendar__year"></span>\n          </div>\n          <div class="calendar__arrow calendar__arrow-next"><div class="calendar__arrow-inner"></div></div>\n        </div>\n        <div class="calendar__body">\n          <div class="calendar__weekdays"></div>\n          <div class="calendar__days"></div>\n          <div class="calendar__picker">\n            <div class="calendar__picker-month">\n              <div class="calendar__picker-month-option" data-value="0">Jan</div>\n              <div class="calendar__picker-month-option" data-value="1">Feb</div>\n              <div class="calendar__picker-month-option" data-value="2">Mar</div>\n              <div class="calendar__picker-month-option" data-value="3">Apr</div>\n              <div class="calendar__picker-month-option" data-value="4">May</div>\n              <div class="calendar__picker-month-option" data-value="5">Jun</div>\n              <div class="calendar__picker-month-option" data-value="6">Jul</div>\n              <div class="calendar__picker-month-option" data-value="7">Aug</div>\n              <div class="calendar__picker-month-option" data-value="8">Sep</div>\n              <div class="calendar__picker-month-option" data-value="9">Oct</div>\n              <div class="calendar__picker-month-option" data-value="10">Nov</div>\n              <div class="calendar__picker-month-option" data-value="11">Dec</div>\n            </div>\n            <div class="calendar__picker-year">\n              <div class="calendar__picker-year-option" data-value="0"></div>\n              <div class="calendar__picker-year-option" data-value="1"></div>\n              <div class="calendar__picker-year-option" data-value="2"></div>\n              <div class="calendar__picker-year-option" data-value="3"></div>\n              <div class="calendar__picker-year-option" data-value="4"></div>\n              <div class="calendar__picker-year-option" data-value="5"></div>\n              <div class="calendar__picker-year-option" data-value="6"></div>\n              <div class="calendar__picker-year-option" data-value="7"></div>\n              <div class="calendar__picker-year-option" data-value="8"></div>\n              <div class="calendar__picker-year-option" data-value="9"></div>\n              <div class="calendar__picker-year-option" data-value="10"></div>\n              <div class="calendar__picker-year-option" data-value="11"></div>\n              <div class="calendar__picker-year-arrow calendar__picker-year-arrow-left">\n                <div class="chevron-thin chevron-thin-left"></div>\n              </div>\n              <div class="calendar__picker-year-arrow calendar__picker-year-arrow-right">\n                <div class="chevron-thin chevron-thin-right"></div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    `,this.calendarMonthYear=document.querySelector(this.id+" .calendar__monthyear"),this.calendarWeekdays=document.querySelector(this.id+" .calendar__weekdays"),this.calendarDays=document.querySelector(this.id+" .calendar__days"),this.prevButton=document.querySelector(this.id+" .calendar__arrow-prev .calendar__arrow-inner"),this.nextButton=document.querySelector(this.id+" .calendar__arrow-next .calendar__arrow-inner"),this.pickerContainer=document.querySelector(this.id+" .calendar__picker"),this.pickerMonthContainer=document.querySelector(this.id+" .calendar__picker-month"),this.pickerYearContainer=document.querySelector(this.id+" .calendar__picker-year"),this.yearPickerChevronLeft=document.querySelector(this.id+" .calendar__picker-year-arrow-left"),this.yearPickerChevronRight=document.querySelector(this.id+" .calendar__picker-year-arrow-right"),this.monthyearDisplay=document.querySelector(this.id+" .calendar__monthyear"),this.monthDisplay=document.querySelector(this.id+" .calendar__month"),this.yearDisplay=document.querySelector(this.id+" .calendar__year"),this.resetCalendar()}resetCalendar(){this.initializeLayout(),this.updateMonthYear(),this.updateMonthPickerSelection(this.currentDate.getMonth()),this.generatePickerYears(),this.updateYearPickerSelection(this.currentDate.getFullYear(),4),this.generateWeekdays(),this.generateDays(),this.selectDayInitial(),this.renderDays(),this.setOldSelectedNode(),this.dateChanged&&this.dateChanged(this.currentDate,this.getDateEvents(this.currentDate)),this.monthChanged&&this.monthChanged(this.currentDate,this.getMonthEvents())}initializeLayout(){this.togglePicker(!1),this.prevButton.addEventListener("click",this.handlePrevMonthButtonClick.bind(this)),this.nextButton.addEventListener("click",this.handleNextMonthButtonClick.bind(this)),this.monthyearDisplay.addEventListener("click",this.handleMonthYearDisplayClick.bind(this)),this.calendarDays.addEventListener("click",this.handleCalendarDayClick.bind(this)),this.pickerMonthContainer.addEventListener("click",this.handleMonthPickerClick.bind(this)),this.pickerYearContainer.addEventListener("click",this.handleYearPickerClick.bind(this)),this.yearPickerChevronLeft.addEventListener("click",this.handleYearChevronLeftClick.bind(this)),this.yearPickerChevronRight.addEventListener("click",this.handleYearChevronRightClick.bind(this)),this.configureStylePreferences()}configureStylePreferences(){let e=document.querySelector(`${this.id} .${this.CAL_NAME}`);this.primaryColor&&e.style.setProperty("--cal-color-primary",this.primaryColor),this.fontFamilyHeader&&e.style.setProperty("--cal-font-family-header",this.fontFamilyHeader),this.fontFamilyWeekdays&&e.style.setProperty("--cal-font-family-weekdays",this.fontFamilyWeekdays),this.fontFamilyBody&&e.style.setProperty("--cal-font-family-body",this.fontFamilyBody),this.dropShadow||e.style.setProperty("--cal-drop-shadow","none"),this.border&&e.style.setProperty("--cal-border",this.border),this.borderRadius&&e.style.setProperty("--cal-border-radius",this.borderRadius),this.headerColor&&e.style.setProperty("--cal-header-color",this.headerColor),this.headerBackgroundColor&&e.style.setProperty("--cal-header-background-color",this.headerBackgroundColor),this.weekdaysColor&&e.style.setProperty("--cal-weekdays-color",this.weekdaysColor)}clearCalendarDays(){this.daysIn_PrevMonth=[],this.daysIn_CurrentMonth=[],this.daysIn_NextMonth=[]}updateCalendar(e){e&&(this.updateMonthYear(),this.clearCalendarDays(),this.generateDays(),this.selectDayInitial()),this.renderDays(),e&&this.setOldSelectedNode()}setOldSelectedNode(){if(!this.oldSelectedNode){let e=void 0;for(let t=1;t<this.calendarDays.childNodes.length;t+=2){let a=this.calendarDays.childNodes[t];if(a.classList&&a.classList.contains("calendar__day-active")&&a.innerText===this.currentDate.getDate().toString()){e=a;break}}e&&(this.oldSelectedNode=[e,parseInt(e.innerText)])}}selectDayInitial(){let e=this.today.getMonth()===this.currentDate.getMonth(),t=this.today.getDate()===this.currentDate.getDate();e&&t?this.daysIn_CurrentMonth[this.today.getDate()-1].selected=!0:this.daysIn_CurrentMonth[0].selected=!0}getEventsData(){return JSON.parse(JSON.stringify(this.eventsData))}setEventsData(e){return this.eventsData=JSON.parse(JSON.stringify(e)),this.updateCalendar(),this.eventsData}addEventsData(e=[]){const t=this.eventsData.push(...e);return this.updateCalendar(),t}handleMonthYearDisplayClick(e){if(!e.target.classList.contains("calendar__month")&&!e.target.classList.contains("calendar__year"))return;const t=this.pickerType,a=e.target.classList;a.contains("calendar__month")?(this.pickerType="month",this.monthDisplay.style.opacity="1",this.yearDisplay.style.opacity="0.7",this.pickerMonthContainer.style.display="grid",this.pickerYearContainer.style.display="none"):a.contains("calendar__year")&&(this.pickerType="year",this.monthDisplay.style.opacity="0.7",this.yearDisplay.style.opacity="1",this.pickerMonthContainer.style.display="none",this.pickerYearContainer.style.display="grid"),t===this.pickerType?this.togglePicker():this.togglePicker(!0)}togglePicker(e){!0===e?(this.pickerContainer.style.visibility="visible",this.pickerContainer.style.opacity="1","year"===this.pickerType&&this.generatePickerYears(),this.removeYearPickerSelection(),this.updateYearPickerSelection(this.currentDate.getFullYear())):!1===e?(this.pickerContainer.style.visibility="hidden",this.pickerContainer.style.opacity="0",this.monthDisplay&&this.yearDisplay&&(this.monthDisplay.style.opacity="1",this.yearDisplay.style.opacity="1"),this.yearPickerOffsetTemporary=0):"hidden"===this.pickerContainer.style.visibility?(this.pickerContainer.style.visibility="visible",this.pickerContainer.style.opacity="1","year"===this.pickerType&&this.generatePickerYears(),this.removeYearPickerSelection(),this.updateYearPickerSelection(this.currentDate.getFullYear())):(this.pickerContainer.style.visibility="hidden",this.pickerContainer.style.opacity="0",this.monthDisplay&&this.yearDisplay&&(this.monthDisplay.style.opacity="1",this.yearDisplay.style.opacity="1"),this.yearPickerOffsetTemporary=0)}handleMonthPickerClick(e){if(!e.target.classList.contains("calendar__picker-month-option"))return;const t=parseInt(e.target.dataset.value);this.updateMonthPickerSelection(t),this.updateCurrentDate(0,void 0,t),this.togglePicker(!1)}updateMonthPickerSelection(e){const t=this.currentDate.getMonth();e<0?e=11:e%=12,this.pickerMonthContainer.children[t].classList.remove("calendar__picker-month-selected"),this.pickerMonthContainer.children[e].classList.add("calendar__picker-month-selected")}handleYearPickerClick(e){if(!e.target.classList.contains("calendar__picker-year-option"))return;this.yearPickerOffset+=this.yearPickerOffsetTemporary;const t=parseInt(e.target.innerText),a=parseInt(e.target.dataset.value);this.updateYearPickerSelection(t,a),this.updateCurrentDate(0,void 0,void 0,t),this.togglePicker(!1)}updateYearPickerSelection(e,t){if(void 0===t){for(let a=0;a<12;a++){let i=this.pickerYearContainer.children[a];if(parseInt(i.innerHTML)===e&&i.dataset.value){t=parseInt(i.dataset.value);break}}if(void 0===t)return}this.removeYearPickerSelection(),this.pickerYearContainer.children[t].classList.add("calendar__picker-year-selected")}removeYearPickerSelection(){for(let e=0;e<12;e++)this.pickerYearContainer.children[e].classList.contains("calendar__picker-year-selected")&&this.pickerYearContainer.children[e].classList.remove("calendar__picker-year-selected")}generatePickerYears(){const e=this.today.getFullYear()+this.yearPickerOffset+this.yearPickerOffsetTemporary;let t=0;for(let a=e-4;a<=e+7;a++){this.pickerYearContainer.children[t].innerText=a.toString(),t++}}handleYearChevronLeftClick(){this.yearPickerOffsetTemporary-=12,this.generatePickerYears(),this.removeYearPickerSelection(),this.updateYearPickerSelection(this.currentDate.getFullYear())}handleYearChevronRightClick(){this.yearPickerOffsetTemporary+=12,this.generatePickerYears(),this.removeYearPickerSelection(),this.updateYearPickerSelection(this.currentDate.getFullYear())}handleCalendarDayClick(e){if(!(e.target.classList.contains("calendar__day-box")||e.target.classList.contains("calendar__day-text")||e.target.classList.contains("calendar__day-box-today")||e.target.classList.contains("calendar__day-bullet"))||e.target.parentElement.classList.contains("calendar__day-selected"))return;if(this.oldSelectedNode&&!this.oldSelectedNode[0])return;let t,a;t=e.target.parentElement.innerText,a=parseInt(t,10),this.removeOldDaySelection(),t&&(this.updateCurrentDate(0,a),Object.assign(this.daysIn_CurrentMonth[a-1],{selected:!0}),this.rerenderSelectedDay(e.target.parentElement,a,!0))}getDateEvents(e){return this.filteredEventsThisMonth.filter(t=>{const a=new Date(t.start).getDate(),i=new Date(t.end).getDate();return e.getDate()>=a&&e.getDate()<=i})}getMonthEvents(){return this.filteredEventsThisMonth}removeOldDaySelection(){this.oldSelectedNode&&(Object.assign(this.daysIn_CurrentMonth[this.oldSelectedNode[1]-1],{selected:!1}),this.rerenderSelectedDay(this.oldSelectedNode[0],this.oldSelectedNode[1]))}handlePrevMonthButtonClick(){const e=this.currentDate.getMonth()-1;this.currentDate.getFullYear()<=this.today.getFullYear()+this.yearPickerOffset-4&&e<0&&(this.yearPickerOffset-=12,this.generatePickerYears()),e<0&&this.updateYearPickerSelection(this.currentDate.getFullYear()-1),this.updateMonthPickerSelection(e),this.updateCurrentDate(-1),this.togglePicker(!1)}handleNextMonthButtonClick(){const e=this.currentDate.getMonth()+1;this.currentDate.getFullYear()>=this.today.getFullYear()+this.yearPickerOffset+7&&e>11&&(this.yearPickerOffset+=12,this.generatePickerYears()),e>11&&this.updateYearPickerSelection(this.currentDate.getFullYear()+1),this.updateMonthPickerSelection(e),this.updateCurrentDate(1),this.togglePicker(!1)}updateCurrentDate(e,t,a,i){this.currentDate=new Date(i||this.currentDate.getFullYear(),null!=a?a:this.currentDate.getMonth()+e,0===e&&t?t:1),(0!==e||null!=a||i)&&(this.updateCalendar(!0),this.monthChanged&&this.monthChanged(this.currentDate,this.getMonthEvents())),this.dateChanged&&this.dateChanged(this.currentDate,this.getDateEvents(this.currentDate))}updateMonthYear(){this.oldSelectedNode=null,this.monthDisplay.innerHTML=new Intl.DateTimeFormat("default",{month:this.monthDisplayType}).format(this.currentDate),this.yearDisplay.innerHTML=this.currentDate.getFullYear().toString()}generateWeekdays(){let e="";for(let t=0;t<7;t++)e+=`\n        <div class="calendar__weekday">${this.weekdays[(t+this.startWeekday)%7]}</div>\n      `;this.calendarWeekdays.innerHTML=e}generateDays(){this.numOfDays_PrevMonth=new Date(this.currentDate.getFullYear(),this.currentDate.getMonth(),0).getDate(),this.firstDay_CurrentMonth=new Date(this.currentDate.getFullYear(),this.currentDate.getMonth(),1).getDay(),this.numOfDays_CurrentMonth=new Date(this.currentDate.getFullYear(),this.currentDate.getMonth()+1,0).getDate();for(let e=0;e<this.numOfDays_CurrentMonth;e++)this.daysIn_CurrentMonth.push({day:e+1,selected:!1})}renderDays(){let e=0;const t=this.currentDate.getFullYear(),a=this.currentDate.getMonth();let i;this.filteredEventsThisMonth=this.eventsData.filter(e=>{const i=new Date(e.start);return i.getFullYear()===t&&i.getMonth()===a}),this.eventDayMap={},this.filteredEventsThisMonth.forEach(e=>{const t=new Date(e.start).getDate(),a=new Date(e.end).getDate();for(let e=t;e<=a;e++)this.eventDayMap[e]=!0}),i=this.firstDay_CurrentMonth<this.startWeekday?7+this.firstDay_CurrentMonth-this.startWeekday:this.firstDay_CurrentMonth-this.startWeekday;let r="";for(let t=0;t<i;t++)r+=`\n        <div class="calendar__day calendar__day-other">${this.numOfDays_PrevMonth+1-i+t}</div>\n      `,e++;let n=this.today.getFullYear()===this.currentDate.getFullYear(),s=this.today.getMonth()===this.currentDate.getMonth()&&n;this.daysIn_CurrentMonth.forEach(t=>{let a=s&&t.day===this.today.getDate();r+=`\n        <div class="calendar__day calendar__day-active${a?" calendar__day-today":""}${this.eventDayMap[t.day]?" calendar__day-event":" calendar__day-no-event"}${t.selected?" calendar__day-selected":""}">\n          <span class="calendar__day-text">${t.day}</span>\n          <div class="calendar__day-box"></div>\n          <div class="calendar__day-bullet"></div>\n          ${a?'<div class="calendar__day-box-today"></div>':""}\n        </div>\n      `,e++});for(let t=0;t<this.DAYS_TO_DISPLAY-e;t++)r+=`\n        <div class="calendar__day calendar__day-other">${t+1}</div>\n      `;this.calendarDays.innerHTML=r}rerenderSelectedDay(e,t,a){let i=e.previousElementSibling,r=this.today.getFullYear()===this.currentDate.getFullYear(),n=this.today.getMonth()===this.currentDate.getMonth()&&r&&t===this.today.getDate(),s=document.createElement("div");s.className+=`calendar__day calendar__day-active${n?" calendar__day-today":""}${this.eventDayMap[t]?" calendar__day-event":" calendar__day-no-event"}${this.daysIn_CurrentMonth[t-1].selected?" calendar__day-selected":""}`,s.innerHTML=`\n      <span class="calendar__day-text">${t}</span>\n      <div class="calendar__day-box"></div>\n      <div class="calendar__day-bullet"></div>\n      ${n?'<div class="calendar__day-box-today"></div>':""}\n    `,i?i.parentElement?i.parentElement.insertBefore(s,i.nextSibling):console.log("Previous element does not have parent"):this.calendarDays.insertBefore(s,e),a&&(this.oldSelectedNode=[s,t]),e.remove()}};

dist/bundle.esm.js

 /**
  * color-calendar
- * v0.0.1
- * by Pawan Kolhe <[e-mail]>
+ * v1.0.0
+ * by Pawan Kolhe <[e-mail]> (https://pawankolhe.com/)
  */
 
-class e{constructor({id:e="#calendar",weekdayType:t="short",monthDisplayType:a="long",eventsData:n=[],dayClicked:r,monthChanged:s,dateChanged:d,startWeekday:i=0,theme:l="basic",color:h,fontFamily1:o,fontFamily2:c,headerColor:y,headerBackgroundColor:D,dropShadow:_=!0,border:u=!0}={}){switch(this.monthDisplayType=a,this.DAYS_TO_DISPLAY=42,t){case"long":this.WEEKDAYS=["SUN","MON","TUE","WED","THU","FRI","SAT"];break;case"long-lower":this.WEEKDAYS=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];break;default:this.WEEKDAYS=["S","M","T","W","T","F","S"]}this.id=e,this.START_WEEKDAY=i,this.eventsData=n,this.eventDayMap={},this.oldSelectedNode=null,this.filteredEventsThisMonth=null,this.dayClicked=r,this.monthChanged=s,this.dateChanged=d,this.theme=l,this.color=h,this.fontFamily1=o,this.fontFamily2=c,this.dropShadow=_,this.border=u,this.headerColor=y,this.headerBackgroundColor=D,this.today=new Date,this.currentDate=new Date,this.selectedDate=new Date,this.clearCalendarDays(),this.resetCalendar()}resetCalendar(){this.initializeLayout(),this.updateMonthYear(),this.generateWeekdays(),this.generateDays(),this.selectDayInitial(),this.renderDays(),this.setOldSelectedNode()}initializeLayout(){this.calendar=document.querySelector(this.id),this.calendar.innerHTML=`\n      <div class="calendar ${this.theme}">\n        <div class="calendar__header">\n          <div class="calendar__arrow calendar__arrow-prev"><div class="calendar__arrow-inner"></div></div>\n          <div class="calendar__month"></div>\n          <div class="calendar__arrow calendar__arrow-next"><div class="calendar__arrow-inner"></div></div>\n        </div>\n        <div class="calendar__body">\n          <div class="calendar__weekdays"></div>\n          <div class="calendar__days"></div>\n        </div>\n      </div>\n    `,this.configureStylePreferences(),this.calendarMonthYear=document.querySelector(this.id+" .calendar__month"),this.calendarWeekdays=document.querySelector(this.id+" .calendar__weekdays"),this.calendarDays=document.querySelector(this.id+" .calendar__days"),this.prevButton=document.querySelector(this.id+" .calendar__arrow-prev .calendar__arrow-inner"),this.nextButton=document.querySelector(this.id+" .calendar__arrow-next .calendar__arrow-inner"),this.prevButton.addEventListener("click",this.handlePrevMonthButtonClick.bind(this)),this.nextButton.addEventListener("click",this.handleNextMonthButtonClick.bind(this)),this.calendarDays.addEventListener("click",this.handleCalendarDayClick.bind(this))}configureStylePreferences(){let e=document.querySelector(this.id+" .calendar");this.color&&e.style.setProperty("--cal-color-primary",this.color),this.fontFamily1&&e.style.setProperty("--cal-font-family-1",this.fontFamily1),this.fontFamily2&&e.style.setProperty("--cal-font-family-2",this.fontFamily2),this.dropShadow||e.style.setProperty("--cal-drop-shadow","none"),this.border||e.style.setProperty("--cal-border","none"),this.headerColor&&e.style.setProperty("--cal-header-color",this.headerColor),this.headerBackgroundColor&&e.style.setProperty("--cal-header-background-color",this.headerBackgroundColor)}clearCalendarDays(){this.daysIn_PrevMonth=[],this.daysIn_CurrentMonth=[],this.daysIn_NextMonth=[]}updateCalendar(e){e&&(this.updateMonthYear(),this.clearCalendarDays(),this.generateDays(),this.selectDayInitial()),this.renderDays(),e&&this.setOldSelectedNode()}setOldSelectedNode(){if(!this.oldSelectedNode){let e;for(let t=1;t<this.calendarDays.childNodes.length;t+=2){let a=this.calendarDays.childNodes[t];if(a.classList&&a.classList.contains("calendar__day-active")&&a.innerText===this.currentDate.getDate().toString()){e=a;break}}this.oldSelectedNode=[e,parseInt(e.innerText)]}}selectDayInitial(){let e=this.today.getMonth()===this.currentDate.getMonth(),t=this.today.getDate()===this.currentDate.getDate();e&&t?this.daysIn_CurrentMonth[this.today.getDate()-1].selected=!0:this.daysIn_CurrentMonth[0].selected=!0}getEventsData(){return JSON.parse(JSON.stringify(this.eventsData))}setEventsData(e){return this.eventsData=JSON.parse(JSON.stringify(e)),this.updateCalendar(),this.eventsData}addEventsData(e){const t=this.eventsData.push(...e);return this.updateCalendar(),t}handleCalendarDayClick(e){if(!(e.target.classList.contains("calendar__day-box")||e.target.classList.contains("calendar__day-text")||e.target.classList.contains("calendar__day-box-today")||e.target.classList.contains("calendar__day-bullet"))||e.target.parentElement.classList.contains("calendar__day-selected"))return;if(this.oldSelectedNode&&!this.oldSelectedNode[0].previousElementSibling)return;let t,a;if(t=e.target.parentElement.innerText,a=parseInt(t,10),this.oldSelectedNode&&(Object.assign(this.daysIn_CurrentMonth[this.oldSelectedNode[1]-1],{selected:!1}),this.rerenderSelectedDay(this.oldSelectedNode[0],this.oldSelectedNode[1])),t){this.updateCurrentDate(0,a),Object.assign(this.daysIn_CurrentMonth[a-1],{selected:!0}),this.rerenderSelectedDay(e.target.parentElement,a,!0);let t=this.filteredEventsThisMonth.filter(e=>{const t=new Date(e.start).getDate(),a=new Date(e.end).getDate();return this.currentDate.getDate()>=t&&this.currentDate.getDate()<=a});this.dayClicked&&this.dayClicked(t)}}handlePrevMonthButtonClick(){this.updateCurrentDate(-1)}handleNextMonthButtonClick(){this.updateCurrentDate(1)}resetCurrentDate(){this.updateCurrentDate(0)}updateCurrentDate(e,t,a){this.currentDate=new Date(this.currentDate.getFullYear(),a?this.today.getMonth():this.currentDate.getMonth()+e,0===e&&t?t:1),0!==e?(this.updateCalendar(!0),this.monthChanged&&this.monthChanged(this.ISODateUTCToLocal(this.currentDate))):this.dateChanged&&this.dateChanged(this.ISODateUTCToLocal(this.currentDate))}ISODateUTCToLocal(e){const t=6e4*e.getTimezoneOffset();return new Date(Date.now()-t).toISOString().slice(0,-1)}updateMonthYear(){this.oldSelectedNode=null,this.calendarMonthYear.innerHTML=`\n      ${new Intl.DateTimeFormat("default",{month:this.monthDisplayType}).format(this.currentDate)} ${this.currentDate.getFullYear()}\n    `}generateWeekdays(){this.calendarWeekdays.innerHTML="";for(let e=0;e<7;e++)this.calendarWeekdays.innerHTML+=`\n        <div class="calendar__weekday">${this.WEEKDAYS[(e+this.START_WEEKDAY)%7]}</div>\n      `}generateDays(){this.numOfDays_PrevMonth=new Date(this.currentDate.getFullYear(),this.currentDate.getMonth(),0).getDate(),this.firstDay_CurrentMonth=new Date(this.currentDate.getFullYear(),this.currentDate.getMonth(),1).getDay(),this.numOfDays_CurrentMonth=new Date(this.currentDate.getFullYear(),this.currentDate.getMonth()+1,0).getDate();for(let e=0;e<this.numOfDays_CurrentMonth;e++)this.daysIn_CurrentMonth.push({day:e+1,selected:!1})}renderDays(){this.calendarDays.innerHTML="";let e=0;const t=this.currentDate.getMonth();let a;this.filteredEventsThisMonth=this.eventsData.filter(e=>new Date(e.start).getMonth()===t),this.eventDayMap={},this.filteredEventsThisMonth.forEach(e=>{const t=new Date(e.start).getDate(),a=new Date(e.end).getDate();for(let e=t;e<=a;e++)this.eventDayMap[e]=!0}),a=this.firstDay_CurrentMonth<this.START_WEEKDAY?7+this.firstDay_CurrentMonth-this.START_WEEKDAY:this.firstDay_CurrentMonth-this.START_WEEKDAY;for(let t=0;t<a;t++)this.calendarDays.innerHTML+=`\n        <div class="calendar__day calendar__day-other">${this.numOfDays_PrevMonth+1-a+t}</div>\n      `,e++;let n=this.today.getMonth()===this.currentDate.getMonth();this.daysIn_CurrentMonth.forEach(t=>{let a=n&&t.day===this.today.getDate();this.calendarDays.innerHTML+=`\n        <div class="calendar__day calendar__day-active${a?" calendar__day-today":""}${this.eventDayMap[t.day]?" calendar__day-event":" calendar__day-no-event"}${t.selected?" calendar__day-selected":""}">\n          <span class="calendar__day-text">${t.day}</span>\n          <div class="calendar__day-box"></div>\n          <div class="calendar__day-bullet"></div>\n          ${a?'<div class="calendar__day-box-today"></div>':""}\n        </div>\n      `,e++});for(let t=0;t<this.DAYS_TO_DISPLAY-e;t++)this.calendarDays.innerHTML+=`\n        <div class="calendar__day calendar__day-other">${t+1}</div>\n      `}rerenderSelectedDay(e,t,a){let n=e.previousElementSibling;e.remove(e);let r=this.today.getMonth()===this.currentDate.getMonth()&&t===this.today.getDate(),s=document.createElement("div");s.className+=`calendar__day calendar__day-active${r?" calendar__day-today":""}${this.eventDayMap[t]?" calendar__day-event":" calendar__day-no-event"}${this.daysIn_CurrentMonth[t-1].selected?" calendar__day-selected":""}`,s.innerHTML=`\n      <span class="calendar__day-text">${t}</span>\n      <div class="calendar__day-box"></div>\n      <div class="calendar__day-bullet"></div>\n      ${r?'<div class="calendar__day-box-today"></div>':""}\n    `,n.parentElement.insertBefore(s,n.nextSibling),a&&(this.oldSelectedNode=[s,t])}}export{e as Calendar};
+export default class{constructor(e={}){var t,a,i,r,n,s,d;switch(this.CAL_NAME="color-calendar",this.DAYS_TO_DISPLAY=42,this.id=null!==(t=e.id)&&void 0!==t?t:"#calendar",this.monthDisplayType=null!==(a=e.monthDisplayType)&&void 0!==a?a:"long",this.eventsData=null!==(i=e.eventsData)&&void 0!==i?i:[],this.startWeekday=null!==(r=e.startWeekday)&&void 0!==r?r:0,this.theme=null!==(n=e.theme)&&void 0!==n?n:"basic",this.primaryColor=e.primaryColor,this.fontFamilyHeader=e.fontFamilyHeader,this.fontFamilyWeekdays=e.fontFamilyWeekdays,this.fontFamilyBody=e.fontFamilyBody,this.dropShadow=null===(s=e.dropShadow)||void 0===s||s,this.border=e.border,this.borderRadius=e.borderRadius,this.headerColor=e.headerColor,this.headerBackgroundColor=e.headerBackgroundColor,this.weekdaysColor=e.weekdaysColor,this.monthChanged=e.monthChanged,this.dateChanged=e.dateChanged,this.weekdayType=null!==(d=e.weekdayType)&&void 0!==d?d:"long",this.weekdayType){case"short":this.weekdays=["S","M","T","W","T","F","S"];break;case"long-lower":this.weekdays=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];break;case"long-upper":this.weekdays=["SUN","MON","TUE","WED","THU","FRI","SAT"];break;default:this.weekdays=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]}if(this.today=new Date,this.currentDate=new Date,this.pickerType="month",this.eventDayMap={},this.oldSelectedNode=null,this.filteredEventsThisMonth=[],this.daysIn_PrevMonth=[],this.daysIn_CurrentMonth=[],this.daysIn_NextMonth=[],this.firstDay_PrevMonth=0,this.firstDay_CurrentMonth=0,this.firstDay_NextMonth=0,this.numOfDays_PrevMonth=0,this.numOfDays_CurrentMonth=0,this.numOfDays_NextMonth=0,this.yearPickerOffset=0,this.yearPickerOffsetTemporary=0,this.calendar=document.querySelector(this.id),!this.calendar)throw new Error(`Element with selector '${this.id}' not found`);this.calendar.innerHTML=`\n      <div class="${this.CAL_NAME} ${this.theme}">\n        <div class="calendar__header">\n          <div class="calendar__arrow calendar__arrow-prev"><div class="calendar__arrow-inner"></div></div>\n          <div class="calendar__monthyear">\n            <span class="calendar__month"></span>&nbsp;\n            <span class="calendar__year"></span>\n          </div>\n          <div class="calendar__arrow calendar__arrow-next"><div class="calendar__arrow-inner"></div></div>\n        </div>\n        <div class="calendar__body">\n          <div class="calendar__weekdays"></div>\n          <div class="calendar__days"></div>\n          <div class="calendar__picker">\n            <div class="calendar__picker-month">\n              <div class="calendar__picker-month-option" data-value="0">Jan</div>\n              <div class="calendar__picker-month-option" data-value="1">Feb</div>\n              <div class="calendar__picker-month-option" data-value="2">Mar</div>\n              <div class="calendar__picker-month-option" data-value="3">Apr</div>\n              <div class="calendar__picker-month-option" data-value="4">May</div>\n              <div class="calendar__picker-month-option" data-value="5">Jun</div>\n              <div class="calendar__picker-month-option" data-value="6">Jul</div>\n              <div class="calendar__picker-month-option" data-value="7">Aug</div>\n              <div class="calendar__picker-month-option" data-value="8">Sep</div>\n              <div class="calendar__picker-month-option" data-value="9">Oct</div>\n              <div class="calendar__picker-month-option" data-value="10">Nov</div>\n              <div class="calendar__picker-month-option" data-value="11">Dec</div>\n            </div>\n            <div class="calendar__picker-year">\n              <div class="calendar__picker-year-option" data-value="0"></div>\n              <div class="calendar__picker-year-option" data-value="1"></div>\n              <div class="calendar__picker-year-option" data-value="2"></div>\n              <div class="calendar__picker-year-option" data-value="3"></div>\n              <div class="calendar__picker-year-option" data-value="4"></div>\n              <div class="calendar__picker-year-option" data-value="5"></div>\n              <div class="calendar__picker-year-option" data-value="6"></div>\n              <div class="calendar__picker-year-option" data-value="7"></div>\n              <div class="calendar__picker-year-option" data-value="8"></div>\n              <div class="calendar__picker-year-option" data-value="9"></div>\n              <div class="calendar__picker-year-option" data-value="10"></div>\n              <div class="calendar__picker-year-option" data-value="11"></div>\n              <div class="calendar__picker-year-arrow calendar__picker-year-arrow-left">\n                <div class="chevron-thin chevron-thin-left"></div>\n              </div>\n              <div class="calendar__picker-year-arrow calendar__picker-year-arrow-right">\n                <div class="chevron-thin chevron-thin-right"></div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    `,this.calendarMonthYear=document.querySelector(this.id+" .calendar__monthyear"),this.calendarWeekdays=document.querySelector(this.id+" .calendar__weekdays"),this.calendarDays=document.querySelector(this.id+" .calendar__days"),this.prevButton=document.querySelector(this.id+" .calendar__arrow-prev .calendar__arrow-inner"),this.nextButton=document.querySelector(this.id+" .calendar__arrow-next .calendar__arrow-inner"),this.pickerContainer=document.querySelector(this.id+" .calendar__picker"),this.pickerMonthContainer=document.querySelector(this.id+" .calendar__picker-month"),this.pickerYearContainer=document.querySelector(this.id+" .calendar__picker-year"),this.yearPickerChevronLeft=document.querySelector(this.id+" .calendar__picker-year-arrow-left"),this.yearPickerChevronRight=document.querySelector(this.id+" .calendar__picker-year-arrow-right"),this.monthyearDisplay=document.querySelector(this.id+" .calendar__monthyear"),this.monthDisplay=document.querySelector(this.id+" .calendar__month"),this.yearDisplay=document.querySelector(this.id+" .calendar__year"),this.resetCalendar()}resetCalendar(){this.initializeLayout(),this.updateMonthYear(),this.updateMonthPickerSelection(this.currentDate.getMonth()),this.generatePickerYears(),this.updateYearPickerSelection(this.currentDate.getFullYear(),4),this.generateWeekdays(),this.generateDays(),this.selectDayInitial(),this.renderDays(),this.setOldSelectedNode(),this.dateChanged&&this.dateChanged(this.currentDate,this.getDateEvents(this.currentDate)),this.monthChanged&&this.monthChanged(this.currentDate,this.getMonthEvents())}initializeLayout(){this.togglePicker(!1),this.prevButton.addEventListener("click",this.handlePrevMonthButtonClick.bind(this)),this.nextButton.addEventListener("click",this.handleNextMonthButtonClick.bind(this)),this.monthyearDisplay.addEventListener("click",this.handleMonthYearDisplayClick.bind(this)),this.calendarDays.addEventListener("click",this.handleCalendarDayClick.bind(this)),this.pickerMonthContainer.addEventListener("click",this.handleMonthPickerClick.bind(this)),this.pickerYearContainer.addEventListener("click",this.handleYearPickerClick.bind(this)),this.yearPickerChevronLeft.addEventListener("click",this.handleYearChevronLeftClick.bind(this)),this.yearPickerChevronRight.addEventListener("click",this.handleYearChevronRightClick.bind(this)),this.configureStylePreferences()}configureStylePreferences(){let e=document.querySelector(`${this.id} .${this.CAL_NAME}`);this.primaryColor&&e.style.setProperty("--cal-color-primary",this.primaryColor),this.fontFamilyHeader&&e.style.setProperty("--cal-font-family-header",this.fontFamilyHeader),this.fontFamilyWeekdays&&e.style.setProperty("--cal-font-family-weekdays",this.fontFamilyWeekdays),this.fontFamilyBody&&e.style.setProperty("--cal-font-family-body",this.fontFamilyBody),this.dropShadow||e.style.setProperty("--cal-drop-shadow","none"),this.border&&e.style.setProperty("--cal-border",this.border),this.borderRadius&&e.style.setProperty("--cal-border-radius",this.borderRadius),this.headerColor&&e.style.setProperty("--cal-header-color",this.headerColor),this.headerBackgroundColor&&e.style.setProperty("--cal-header-background-color",this.headerBackgroundColor),this.weekdaysColor&&e.style.setProperty("--cal-weekdays-color",this.weekdaysColor)}clearCalendarDays(){this.daysIn_PrevMonth=[],this.daysIn_CurrentMonth=[],this.daysIn_NextMonth=[]}updateCalendar(e){e&&(this.updateMonthYear(),this.clearCalendarDays(),this.generateDays(),this.selectDayInitial()),this.renderDays(),e&&this.setOldSelectedNode()}setOldSelectedNode(){if(!this.oldSelectedNode){let e=void 0;for(let t=1;t<this.calendarDays.childNodes.length;t+=2){let a=this.calendarDays.childNodes[t];if(a.classList&&a.classList.contains("calendar__day-active")&&a.innerText===this.currentDate.getDate().toString()){e=a;break}}e&&(this.oldSelectedNode=[e,parseInt(e.innerText)])}}selectDayInitial(){let e=this.today.getMonth()===this.currentDate.getMonth(),t=this.today.getDate()===this.currentDate.getDate();e&&t?this.daysIn_CurrentMonth[this.today.getDate()-1].selected=!0:this.daysIn_CurrentMonth[0].selected=!0}getEventsData(){return JSON.parse(JSON.stringify(this.eventsData))}setEventsData(e){return this.eventsData=JSON.parse(JSON.stringify(e)),this.updateCalendar(),this.eventsData}addEventsData(e=[]){const t=this.eventsData.push(...e);return this.updateCalendar(),t}handleMonthYearDisplayClick(e){if(!e.target.classList.contains("calendar__month")&&!e.target.classList.contains("calendar__year"))return;const t=this.pickerType,a=e.target.classList;a.contains("calendar__month")?(this.pickerType="month",this.monthDisplay.style.opacity="1",this.yearDisplay.style.opacity="0.7",this.pickerMonthContainer.style.display="grid",this.pickerYearContainer.style.display="none"):a.contains("calendar__year")&&(this.pickerType="year",this.monthDisplay.style.opacity="0.7",this.yearDisplay.style.opacity="1",this.pickerMonthContainer.style.display="none",this.pickerYearContainer.style.display="grid"),t===this.pickerType?this.togglePicker():this.togglePicker(!0)}togglePicker(e){!0===e?(this.pickerContainer.style.visibility="visible",this.pickerContainer.style.opacity="1","year"===this.pickerType&&this.generatePickerYears(),this.removeYearPickerSelection(),this.updateYearPickerSelection(this.currentDate.getFullYear())):!1===e?(this.pickerContainer.style.visibility="hidden",this.pickerContainer.style.opacity="0",this.monthDisplay&&this.yearDisplay&&(this.monthDisplay.style.opacity="1",this.yearDisplay.style.opacity="1"),this.yearPickerOffsetTemporary=0):"hidden"===this.pickerContainer.style.visibility?(this.pickerContainer.style.visibility="visible",this.pickerContainer.style.opacity="1","year"===this.pickerType&&this.generatePickerYears(),this.removeYearPickerSelection(),this.updateYearPickerSelection(this.currentDate.getFullYear())):(this.pickerContainer.style.visibility="hidden",this.pickerContainer.style.opacity="0",this.monthDisplay&&this.yearDisplay&&(this.monthDisplay.style.opacity="1",this.yearDisplay.style.opacity="1"),this.yearPickerOffsetTemporary=0)}handleMonthPickerClick(e){if(!e.target.classList.contains("calendar__picker-month-option"))return;const t=parseInt(e.target.dataset.value);this.updateMonthPickerSelection(t),this.updateCurrentDate(0,void 0,t),this.togglePicker(!1)}updateMonthPickerSelection(e){const t=this.currentDate.getMonth();e<0?e=11:e%=12,this.pickerMonthContainer.children[t].classList.remove("calendar__picker-month-selected"),this.pickerMonthContainer.children[e].classList.add("calendar__picker-month-selected")}handleYearPickerClick(e){if(!e.target.classList.contains("calendar__picker-year-option"))return;this.yearPickerOffset+=this.yearPickerOffsetTemporary;const t=parseInt(e.target.innerText),a=parseInt(e.target.dataset.value);this.updateYearPickerSelection(t,a),this.updateCurrentDate(0,void 0,void 0,t),this.togglePicker(!1)}updateYearPickerSelection(e,t){if(void 0===t){for(let a=0;a<12;a++){let i=this.pickerYearContainer.children[a];if(parseInt(i.innerHTML)===e&&i.dataset.value){t=parseInt(i.dataset.value);break}}if(void 0===t)return}this.removeYearPickerSelection(),this.pickerYearContainer.children[t].classList.add("calendar__picker-year-selected")}removeYearPickerSelection(){for(let e=0;e<12;e++)this.pickerYearContainer.children[e].classList.contains("calendar__picker-year-selected")&&this.pickerYearContainer.children[e].classList.remove("calendar__picker-year-selected")}generatePickerYears(){const e=this.today.getFullYear()+this.yearPickerOffset+this.yearPickerOffsetTemporary;let t=0;for(let a=e-4;a<=e+7;a++){this.pickerYearContainer.children[t].innerText=a.toString(),t++}}handleYearChevronLeftClick(){this.yearPickerOffsetTemporary-=12,this.generatePickerYears(),this.removeYearPickerSelection(),this.updateYearPickerSelection(this.currentDate.getFullYear())}handleYearChevronRightClick(){this.yearPickerOffsetTemporary+=12,this.generatePickerYears(),this.removeYearPickerSelection(),this.updateYearPickerSelection(this.currentDate.getFullYear())}handleCalendarDayClick(e){if(!(e.target.classList.contains("calendar__day-box")||e.target.classList.contains("calendar__day-text")||e.target.classList.contains("calendar__day-box-today")||e.target.classList.contains("calendar__day-bullet"))||e.target.parentElement.classList.contains("calendar__day-selected"))return;if(this.oldSelectedNode&&!this.oldSelectedNode[0])return;let t,a;t=e.target.parentElement.innerText,a=parseInt(t,10),this.removeOldDaySelection(),t&&(this.updateCurrentDate(0,a),Object.assign(this.daysIn_CurrentMonth[a-1],{selected:!0}),this.rerenderSelectedDay(e.target.parentElement,a,!0))}getDateEvents(e){return this.filteredEventsThisMonth.filter(t=>{const a=new Date(t.start).getDate(),i=new Date(t.end).getDate();return e.getDate()>=a&&e.getDate()<=i})}getMonthEvents(){return this.filteredEventsThisMonth}removeOldDaySelection(){this.oldSelectedNode&&(Object.assign(this.daysIn_CurrentMonth[this.oldSelectedNode[1]-1],{selected:!1}),this.rerenderSelectedDay(this.oldSelectedNode[0],this.oldSelectedNode[1]))}handlePrevMonthButtonClick(){const e=this.currentDate.getMonth()-1;this.currentDate.getFullYear()<=this.today.getFullYear()+this.yearPickerOffset-4&&e<0&&(this.yearPickerOffset-=12,this.generatePickerYears()),e<0&&this.updateYearPickerSelection(this.currentDate.getFullYear()-1),this.updateMonthPickerSelection(e),this.updateCurrentDate(-1),this.togglePicker(!1)}handleNextMonthButtonClick(){const e=this.currentDate.getMonth()+1;this.currentDate.getFullYear()>=this.today.getFullYear()+this.yearPickerOffset+7&&e>11&&(this.yearPickerOffset+=12,this.generatePickerYears()),e>11&&this.updateYearPickerSelection(this.currentDate.getFullYear()+1),this.updateMonthPickerSelection(e),this.updateCurrentDate(1),this.togglePicker(!1)}updateCurrentDate(e,t,a,i){this.currentDate=new Date(i||this.currentDate.getFullYear(),null!=a?a:this.currentDate.getMonth()+e,0===e&&t?t:1),(0!==e||null!=a||i)&&(this.updateCalendar(!0),this.monthChanged&&this.monthChanged(this.currentDate,this.getMonthEvents())),this.dateChanged&&this.dateChanged(this.currentDate,this.getDateEvents(this.currentDate))}updateMonthYear(){this.oldSelectedNode=null,this.monthDisplay.innerHTML=new Intl.DateTimeFormat("default",{month:this.monthDisplayType}).format(this.currentDate),this.yearDisplay.innerHTML=this.currentDate.getFullYear().toString()}generateWeekdays(){let e="";for(let t=0;t<7;t++)e+=`\n        <div class="calendar__weekday">${this.weekdays[(t+this.startWeekday)%7]}</div>\n      `;this.calendarWeekdays.innerHTML=e}generateDays(){this.numOfDays_PrevMonth=new Date(this.currentDate.getFullYear(),this.currentDate.getMonth(),0).getDate(),this.firstDay_CurrentMonth=new Date(this.currentDate.getFullYear(),this.currentDate.getMonth(),1).getDay(),this.numOfDays_CurrentMonth=new Date(this.currentDate.getFullYear(),this.currentDate.getMonth()+1,0).getDate();for(let e=0;e<this.numOfDays_CurrentMonth;e++)this.daysIn_CurrentMonth.push({day:e+1,selected:!1})}renderDays(){let e=0;const t=this.currentDate.getFullYear(),a=this.currentDate.getMonth();let i;this.filteredEventsThisMonth=this.eventsData.filter(e=>{const i=new Date(e.start);return i.getFullYear()===t&&i.getMonth()===a}),this.eventDayMap={},this.filteredEventsThisMonth.forEach(e=>{const t=new Date(e.start).getDate(),a=new Date(e.end).getDate();for(let e=t;e<=a;e++)this.eventDayMap[e]=!0}),i=this.firstDay_CurrentMonth<this.startWeekday?7+this.firstDay_CurrentMonth-this.startWeekday:this.firstDay_CurrentMonth-this.startWeekday;let r="";for(let t=0;t<i;t++)r+=`\n        <div class="calendar__day calendar__day-other">${this.numOfDays_PrevMonth+1-i+t}</div>\n      `,e++;let n=this.today.getFullYear()===this.currentDate.getFullYear(),s=this.today.getMonth()===this.currentDate.getMonth()&&n;this.daysIn_CurrentMonth.forEach(t=>{let a=s&&t.day===this.today.getDate();r+=`\n        <div class="calendar__day calendar__day-active${a?" calendar__day-today":""}${this.eventDayMap[t.day]?" calendar__day-event":" calendar__day-no-event"}${t.selected?" calendar__day-selected":""}">\n          <span class="calendar__day-text">${t.day}</span>\n          <div class="calendar__day-box"></div>\n          <div class="calendar__day-bullet"></div>\n          ${a?'<div class="calendar__day-box-today"></div>':""}\n        </div>\n      `,e++});for(let t=0;t<this.DAYS_TO_DISPLAY-e;t++)r+=`\n        <div class="calendar__day calendar__day-other">${t+1}</div>\n      `;this.calendarDays.innerHTML=r}rerenderSelectedDay(e,t,a){let i=e.previousElementSibling,r=this.today.getFullYear()===this.currentDate.getFullYear(),n=this.today.getMonth()===this.currentDate.getMonth()&&r&&t===this.today.getDate(),s=document.createElement("div");s.className+=`calendar__day calendar__day-active${n?" calendar__day-today":""}${this.eventDayMap[t]?" calendar__day-event":" calendar__day-no-event"}${this.daysIn_CurrentMonth[t-1].selected?" calendar__day-selected":""}`,s.innerHTML=`\n      <span class="calendar__day-text">${t}</span>\n      <div class="calendar__day-box"></div>\n      <div class="calendar__day-bullet"></div>\n      ${n?'<div class="calendar__day-box-today"></div>':""}\n    `,i?i.parentElement?i.parentElement.insertBefore(s,i.nextSibling):console.log("Previous element does not have parent"):this.calendarDays.insertBefore(s,e),a&&(this.oldSelectedNode=[s,t]),e.remove()}}

dist/bundle.js

 /**
  * color-calendar
- * v0.0.1
- * by Pawan Kolhe <[e-mail]>
+ * v1.0.0
+ * by Pawan Kolhe <[e-mail]> (https://pawankolhe.com/)
  */
 
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Calendar={})}(this,(function(e){"use strict";e.Calendar=class{constructor({id:e="#calendar",weekdayType:t="short",monthDisplayType:a="long",eventsData:n=[],dayClicked:s,monthChanged:r,dateChanged:d,startWeekday:i=0,theme:l="basic",color:h,fontFamily1:o,fontFamily2:c,headerColor:y,headerBackgroundColor:u,dropShadow:D=!0,border:_=!0}={}){switch(this.monthDisplayType=a,this.DAYS_TO_DISPLAY=42,t){case"long":this.WEEKDAYS=["SUN","MON","TUE","WED","THU","FRI","SAT"];break;case"long-lower":this.WEEKDAYS=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];break;default:this.WEEKDAYS=["S","M","T","W","T","F","S"]}this.id=e,this.START_WEEKDAY=i,this.eventsData=n,this.eventDayMap={},this.oldSelectedNode=null,this.filteredEventsThisMonth=null,this.dayClicked=s,this.monthChanged=r,this.dateChanged=d,this.theme=l,this.color=h,this.fontFamily1=o,this.fontFamily2=c,this.dropShadow=D,this.border=_,this.headerColor=y,this.headerBackgroundColor=u,this.today=new Date,this.currentDate=new Date,this.selectedDate=new Date,this.clearCalendarDays(),this.resetCalendar()}resetCalendar(){this.initializeLayout(),this.updateMonthYear(),this.generateWeekdays(),this.generateDays(),this.selectDayInitial(),this.renderDays(),this.setOldSelectedNode()}initializeLayout(){this.calendar=document.querySelector(this.id),this.calendar.innerHTML=`\n      <div class="calendar ${this.theme}">\n        <div class="calendar__header">\n          <div class="calendar__arrow calendar__arrow-prev"><div class="calendar__arrow-inner"></div></div>\n          <div class="calendar__month"></div>\n          <div class="calendar__arrow calendar__arrow-next"><div class="calendar__arrow-inner"></div></div>\n        </div>\n        <div class="calendar__body">\n          <div class="calendar__weekdays"></div>\n          <div class="calendar__days"></div>\n        </div>\n      </div>\n    `,this.configureStylePreferences(),this.calendarMonthYear=document.querySelector(this.id+" .calendar__month"),this.calendarWeekdays=document.querySelector(this.id+" .calendar__weekdays"),this.calendarDays=document.querySelector(this.id+" .calendar__days"),this.prevButton=document.querySelector(this.id+" .calendar__arrow-prev .calendar__arrow-inner"),this.nextButton=document.querySelector(this.id+" .calendar__arrow-next .calendar__arrow-inner"),this.prevButton.addEventListener("click",this.handlePrevMonthButtonClick.bind(this)),this.nextButton.addEventListener("click",this.handleNextMonthButtonClick.bind(this)),this.calendarDays.addEventListener("click",this.handleCalendarDayClick.bind(this))}configureStylePreferences(){let e=document.querySelector(this.id+" .calendar");this.color&&e.style.setProperty("--cal-color-primary",this.color),this.fontFamily1&&e.style.setProperty("--cal-font-family-1",this.fontFamily1),this.fontFamily2&&e.style.setProperty("--cal-font-family-2",this.fontFamily2),this.dropShadow||e.style.setProperty("--cal-drop-shadow","none"),this.border||e.style.setProperty("--cal-border","none"),this.headerColor&&e.style.setProperty("--cal-header-color",this.headerColor),this.headerBackgroundColor&&e.style.setProperty("--cal-header-background-color",this.headerBackgroundColor)}clearCalendarDays(){this.daysIn_PrevMonth=[],this.daysIn_CurrentMonth=[],this.daysIn_NextMonth=[]}updateCalendar(e){e&&(this.updateMonthYear(),this.clearCalendarDays(),this.generateDays(),this.selectDayInitial()),this.renderDays(),e&&this.setOldSelectedNode()}setOldSelectedNode(){if(!this.oldSelectedNode){let e;for(let t=1;t<this.calendarDays.childNodes.length;t+=2){let a=this.calendarDays.childNodes[t];if(a.classList&&a.classList.contains("calendar__day-active")&&a.innerText===this.currentDate.getDate().toString()){e=a;break}}this.oldSelectedNode=[e,parseInt(e.innerText)]}}selectDayInitial(){let e=this.today.getMonth()===this.currentDate.getMonth(),t=this.today.getDate()===this.currentDate.getDate();e&&t?this.daysIn_CurrentMonth[this.today.getDate()-1].selected=!0:this.daysIn_CurrentMonth[0].selected=!0}getEventsData(){return JSON.parse(JSON.stringify(this.eventsData))}setEventsData(e){return this.eventsData=JSON.parse(JSON.stringify(e)),this.updateCalendar(),this.eventsData}addEventsData(e){const t=this.eventsData.push(...e);return this.updateCalendar(),t}handleCalendarDayClick(e){if(!(e.target.classList.contains("calendar__day-box")||e.target.classList.contains("calendar__day-text")||e.target.classList.contains("calendar__day-box-today")||e.target.classList.contains("calendar__day-bullet"))||e.target.parentElement.classList.contains("calendar__day-selected"))return;if(this.oldSelectedNode&&!this.oldSelectedNode[0].previousElementSibling)return;let t,a;if(t=e.target.parentElement.innerText,a=parseInt(t,10),this.oldSelectedNode&&(Object.assign(this.daysIn_CurrentMonth[this.oldSelectedNode[1]-1],{selected:!1}),this.rerenderSelectedDay(this.oldSelectedNode[0],this.oldSelectedNode[1])),t){this.updateCurrentDate(0,a),Object.assign(this.daysIn_CurrentMonth[a-1],{selected:!0}),this.rerenderSelectedDay(e.target.parentElement,a,!0);let t=this.filteredEventsThisMonth.filter(e=>{const t=new Date(e.start).getDate(),a=new Date(e.end).getDate();return this.currentDate.getDate()>=t&&this.currentDate.getDate()<=a});this.dayClicked&&this.dayClicked(t)}}handlePrevMonthButtonClick(){this.updateCurrentDate(-1)}handleNextMonthButtonClick(){this.updateCurrentDate(1)}resetCurrentDate(){this.updateCurrentDate(0)}updateCurrentDate(e,t,a){this.currentDate=new Date(this.currentDate.getFullYear(),a?this.today.getMonth():this.currentDate.getMonth()+e,0===e&&t?t:1),0!==e?(this.updateCalendar(!0),this.monthChanged&&this.monthChanged(this.ISODateUTCToLocal(this.currentDate))):this.dateChanged&&this.dateChanged(this.ISODateUTCToLocal(this.currentDate))}ISODateUTCToLocal(e){const t=6e4*e.getTimezoneOffset();return new Date(Date.now()-t).toISOString().slice(0,-1)}updateMonthYear(){this.oldSelectedNode=null,this.calendarMonthYear.innerHTML=`\n      ${new Intl.DateTimeFormat("default",{month:this.monthDisplayType}).format(this.currentDate)} ${this.currentDate.getFullYear()}\n    `}generateWeekdays(){this.calendarWeekdays.innerHTML="";for(let e=0;e<7;e++)this.calendarWeekdays.innerHTML+=`\n        <div class="calendar__weekday">${this.WEEKDAYS[(e+this.START_WEEKDAY)%7]}</div>\n      `}generateDays(){this.numOfDays_PrevMonth=new Date(this.currentDate.getFullYear(),this.currentDate.getMonth(),0).getDate(),this.firstDay_CurrentMonth=new Date(this.currentDate.getFullYear(),this.currentDate.getMonth(),1).getDay(),this.numOfDays_CurrentMonth=new Date(this.currentDate.getFullYear(),this.currentDate.getMonth()+1,0).getDate();for(let e=0;e<this.numOfDays_CurrentMonth;e++)this.daysIn_CurrentMonth.push({day:e+1,selected:!1})}renderDays(){this.calendarDays.innerHTML="";let e=0;const t=this.currentDate.getMonth();let a;this.filteredEventsThisMonth=this.eventsData.filter(e=>new Date(e.start).getMonth()===t),this.eventDayMap={},this.filteredEventsThisMonth.forEach(e=>{const t=new Date(e.start).getDate(),a=new Date(e.end).getDate();for(let e=t;e<=a;e++)this.eventDayMap[e]=!0}),a=this.firstDay_CurrentMonth<this.START_WEEKDAY?7+this.firstDay_CurrentMonth-this.START_WEEKDAY:this.firstDay_CurrentMonth-this.START_WEEKDAY;for(let t=0;t<a;t++)this.calendarDays.innerHTML+=`\n        <div class="calendar__day calendar__day-other">${this.numOfDays_PrevMonth+1-a+t}</div>\n      `,e++;let n=this.today.getMonth()===this.currentDate.getMonth();this.daysIn_CurrentMonth.forEach(t=>{let a=n&&t.day===this.today.getDate();this.calendarDays.innerHTML+=`\n        <div class="calendar__day calendar__day-active${a?" calendar__day-today":""}${this.eventDayMap[t.day]?" calendar__day-event":" calendar__day-no-event"}${t.selected?" calendar__day-selected":""}">\n          <span class="calendar__day-text">${t.day}</span>\n          <div class="calendar__day-box"></div>\n          <div class="calendar__day-bullet"></div>\n          ${a?'<div class="calendar__day-box-today"></div>':""}\n        </div>\n      `,e++});for(let t=0;t<this.DAYS_TO_DISPLAY-e;t++)this.calendarDays.innerHTML+=`\n        <div class="calendar__day calendar__day-other">${t+1}</div>\n      `}rerenderSelectedDay(e,t,a){let n=e.previousElementSibling;e.remove(e);let s=this.today.getMonth()===this.currentDate.getMonth()&&t===this.today.getDate(),r=document.createElement("div");r.className+=`calendar__day calendar__day-active${s?" calendar__day-today":""}${this.eventDayMap[t]?" calendar__day-event":" calendar__day-no-event"}${this.daysIn_CurrentMonth[t-1].selected?" calendar__day-selected":""}`,r.innerHTML=`\n      <span class="calendar__day-text">${t}</span>\n      <div class="calendar__day-box"></div>\n      <div class="calendar__day-bullet"></div>\n      ${s?'<div class="calendar__day-box-today"></div>':""}\n    `,n.parentElement.insertBefore(r,n.nextSibling),a&&(this.oldSelectedNode=[r,t])}},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Calendar=t()}(this,(function(){"use strict";return class{constructor(e={}){var t,a,i,r,n,s,d;switch(this.CAL_NAME="color-calendar",this.DAYS_TO_DISPLAY=42,this.id=null!==(t=e.id)&&void 0!==t?t:"#calendar",this.monthDisplayType=null!==(a=e.monthDisplayType)&&void 0!==a?a:"long",this.eventsData=null!==(i=e.eventsData)&&void 0!==i?i:[],this.startWeekday=null!==(r=e.startWeekday)&&void 0!==r?r:0,this.theme=null!==(n=e.theme)&&void 0!==n?n:"basic",this.primaryColor=e.primaryColor,this.fontFamilyHeader=e.fontFamilyHeader,this.fontFamilyWeekdays=e.fontFamilyWeekdays,this.fontFamilyBody=e.fontFamilyBody,this.dropShadow=null===(s=e.dropShadow)||void 0===s||s,this.border=e.border,this.borderRadius=e.borderRadius,this.headerColor=e.headerColor,this.headerBackgroundColor=e.headerBackgroundColor,this.weekdaysColor=e.weekdaysColor,this.monthChanged=e.monthChanged,this.dateChanged=e.dateChanged,this.weekdayType=null!==(d=e.weekdayType)&&void 0!==d?d:"long",this.weekdayType){case"short":this.weekdays=["S","M","T","W","T","F","S"];break;case"long-lower":this.weekdays=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];break;case"long-upper":this.weekdays=["SUN","MON","TUE","WED","THU","FRI","SAT"];break;default:this.weekdays=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]}if(this.today=new Date,this.currentDate=new Date,this.pickerType="month",this.eventDayMap={},this.oldSelectedNode=null,this.filteredEventsThisMonth=[],this.daysIn_PrevMonth=[],this.daysIn_CurrentMonth=[],this.daysIn_NextMonth=[],this.firstDay_PrevMonth=0,this.firstDay_CurrentMonth=0,this.firstDay_NextMonth=0,this.numOfDays_PrevMonth=0,this.numOfDays_CurrentMonth=0,this.numOfDays_NextMonth=0,this.yearPickerOffset=0,this.yearPickerOffsetTemporary=0,this.calendar=document.querySelector(this.id),!this.calendar)throw new Error(`Element with selector '${this.id}' not found`);this.calendar.innerHTML=`\n      <div class="${this.CAL_NAME} ${this.theme}">\n        <div class="calendar__header">\n          <div class="calendar__arrow calendar__arrow-prev"><div class="calendar__arrow-inner"></div></div>\n          <div class="calendar__monthyear">\n            <span class="calendar__month"></span>&nbsp;\n            <span class="calendar__year"></span>\n          </div>\n          <div class="calendar__arrow calendar__arrow-next"><div class="calendar__arrow-inner"></div></div>\n        </div>\n        <div class="calendar__body">\n          <div class="calendar__weekdays"></div>\n          <div class="calendar__days"></div>\n          <div class="calendar__picker">\n            <div class="calendar__picker-month">\n              <div class="calendar__picker-month-option" data-value="0">Jan</div>\n              <div class="calendar__picker-month-option" data-value="1">Feb</div>\n              <div class="calendar__picker-month-option" data-value="2">Mar</div>\n              <div class="calendar__picker-month-option" data-value="3">Apr</div>\n              <div class="calendar__picker-month-option" data-value="4">May</div>\n              <div class="calendar__picker-month-option" data-value="5">Jun</div>\n              <div class="calendar__picker-month-option" data-value="6">Jul</div>\n              <div class="calendar__picker-month-option" data-value="7">Aug</div>\n              <div class="calendar__picker-month-option" data-value="8">Sep</div>\n              <div class="calendar__picker-month-option" data-value="9">Oct</div>\n              <div class="calendar__picker-month-option" data-value="10">Nov</div>\n              <div class="calendar__picker-month-option" data-value="11">Dec</div>\n            </div>\n            <div class="calendar__picker-year">\n              <div class="calendar__picker-year-option" data-value="0"></div>\n              <div class="calendar__picker-year-option" data-value="1"></div>\n              <div class="calendar__picker-year-option" data-value="2"></div>\n              <div class="calendar__picker-year-option" data-value="3"></div>\n              <div class="calendar__picker-year-option" data-value="4"></div>\n              <div class="calendar__picker-year-option" data-value="5"></div>\n              <div class="calendar__picker-year-option" data-value="6"></div>\n              <div class="calendar__picker-year-option" data-value="7"></div>\n              <div class="calendar__picker-year-option" data-value="8"></div>\n              <div class="calendar__picker-year-option" data-value="9"></div>\n              <div class="calendar__picker-year-option" data-value="10"></div>\n              <div class="calendar__picker-year-option" data-value="11"></div>\n              <div class="calendar__picker-year-arrow calendar__picker-year-arrow-left">\n                <div class="chevron-thin chevron-thin-left"></div>\n              </div>\n              <div class="calendar__picker-year-arrow calendar__picker-year-arrow-right">\n                <div class="chevron-thin chevron-thin-right"></div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    `,this.calendarMonthYear=document.querySelector(this.id+" .calendar__monthyear"),this.calendarWeekdays=document.querySelector(this.id+" .calendar__weekdays"),this.calendarDays=document.querySelector(this.id+" .calendar__days"),this.prevButton=document.querySelector(this.id+" .calendar__arrow-prev .calendar__arrow-inner"),this.nextButton=document.querySelector(this.id+" .calendar__arrow-next .calendar__arrow-inner"),this.pickerContainer=document.querySelector(this.id+" .calendar__picker"),this.pickerMonthContainer=document.querySelector(this.id+" .calendar__picker-month"),this.pickerYearContainer=document.querySelector(this.id+" .calendar__picker-year"),this.yearPickerChevronLeft=document.querySelector(this.id+" .calendar__picker-year-arrow-left"),this.yearPickerChevronRight=document.querySelector(this.id+" .calendar__picker-year-arrow-right"),this.monthyearDisplay=document.querySelector(this.id+" .calendar__monthyear"),this.monthDisplay=document.querySelector(this.id+" .calendar__month"),this.yearDisplay=document.querySelector(this.id+" .calendar__year"),this.resetCalendar()}resetCalendar(){this.initializeLayout(),this.updateMonthYear(),this.updateMonthPickerSelection(this.currentDate.getMonth()),this.generatePickerYears(),this.updateYearPickerSelection(this.currentDate.getFullYear(),4),this.generateWeekdays(),this.generateDays(),this.selectDayInitial(),this.renderDays(),this.setOldSelectedNode(),this.dateChanged&&this.dateChanged(this.currentDate,this.getDateEvents(this.currentDate)),this.monthChanged&&this.monthChanged(this.currentDate,this.getMonthEvents())}initializeLayout(){this.togglePicker(!1),this.prevButton.addEventListener("click",this.handlePrevMonthButtonClick.bind(this)),this.nextButton.addEventListener("click",this.handleNextMonthButtonClick.bind(this)),this.monthyearDisplay.addEventListener("click",this.handleMonthYearDisplayClick.bind(this)),this.calendarDays.addEventListener("click",this.handleCalendarDayClick.bind(this)),this.pickerMonthContainer.addEventListener("click",this.handleMonthPickerClick.bind(this)),this.pickerYearContainer.addEventListener("click",this.handleYearPickerClick.bind(this)),this.yearPickerChevronLeft.addEventListener("click",this.handleYearChevronLeftClick.bind(this)),this.yearPickerChevronRight.addEventListener("click",this.handleYearChevronRightClick.bind(this)),this.configureStylePreferences()}configureStylePreferences(){let e=document.querySelector(`${this.id} .${this.CAL_NAME}`);this.primaryColor&&e.style.setProperty("--cal-color-primary",this.primaryColor),this.fontFamilyHeader&&e.style.setProperty("--cal-font-family-header",this.fontFamilyHeader),this.fontFamilyWeekdays&&e.style.setProperty("--cal-font-family-weekdays",this.fontFamilyWeekdays),this.fontFamilyBody&&e.style.setProperty("--cal-font-family-body",this.fontFamilyBody),this.dropShadow||e.style.setProperty("--cal-drop-shadow","none"),this.border&&e.style.setProperty("--cal-border",this.border),this.borderRadius&&e.style.setProperty("--cal-border-radius",this.borderRadius),this.headerColor&&e.style.setProperty("--cal-header-color",this.headerColor),this.headerBackgroundColor&&e.style.setProperty("--cal-header-background-color",this.headerBackgroundColor),this.weekdaysColor&&e.style.setProperty("--cal-weekdays-color",this.weekdaysColor)}clearCalendarDays(){this.daysIn_PrevMonth=[],this.daysIn_CurrentMonth=[],this.daysIn_NextMonth=[]}updateCalendar(e){e&&(this.updateMonthYear(),this.clearCalendarDays(),this.generateDays(),this.selectDayInitial()),this.renderDays(),e&&this.setOldSelectedNode()}setOldSelectedNode(){if(!this.oldSelectedNode){let e=void 0;for(let t=1;t<this.calendarDays.childNodes.length;t+=2){let a=this.calendarDays.childNodes[t];if(a.classList&&a.classList.contains("calendar__day-active")&&a.innerText===this.currentDate.getDate().toString()){e=a;break}}e&&(this.oldSelectedNode=[e,parseInt(e.innerText)])}}selectDayInitial(){let e=this.today.getMonth()===this.currentDate.getMonth(),t=this.today.getDate()===this.currentDate.getDate();e&&t?this.daysIn_CurrentMonth[this.today.getDate()-1].selected=!0:this.daysIn_CurrentMonth[0].selected=!0}getEventsData(){return JSON.parse(JSON.stringify(this.eventsData))}setEventsData(e){return this.eventsData=JSON.parse(JSON.stringify(e)),this.updateCalendar(),this.eventsData}addEventsData(e=[]){const t=this.eventsData.push(...e);return this.updateCalendar(),t}handleMonthYearDisplayClick(e){if(!e.target.classList.contains("calendar__month")&&!e.target.classList.contains("calendar__year"))return;const t=this.pickerType,a=e.target.classList;a.contains("calendar__month")?(this.pickerType="month",this.monthDisplay.style.opacity="1",this.yearDisplay.style.opacity="0.7",this.pickerMonthContainer.style.display="grid",this.pickerYearContainer.style.display="none"):a.contains("calendar__year")&&(this.pickerType="year",this.monthDisplay.style.opacity="0.7",this.yearDisplay.style.opacity="1",this.pickerMonthContainer.style.display="none",this.pickerYearContainer.style.display="grid"),t===this.pickerType?this.togglePicker():this.togglePicker(!0)}togglePicker(e){!0===e?(this.pickerContainer.style.visibility="visible",this.pickerContainer.style.opacity="1","year"===this.pickerType&&this.generatePickerYears(),this.removeYearPickerSelection(),this.updateYearPickerSelection(this.currentDate.getFullYear())):!1===e?(this.pickerContainer.style.visibility="hidden",this.pickerContainer.style.opacity="0",this.monthDisplay&&this.yearDisplay&&(this.monthDisplay.style.opacity="1",this.yearDisplay.style.opacity="1"),this.yearPickerOffsetTemporary=0):"hidden"===this.pickerContainer.style.visibility?(this.pickerContainer.style.visibility="visible",this.pickerContainer.style.opacity="1","year"===this.pickerType&&this.generatePickerYears(),this.removeYearPickerSelection(),this.updateYearPickerSelection(this.currentDate.getFullYear())):(this.pickerContainer.style.visibility="hidden",this.pickerContainer.style.opacity="0",this.monthDisplay&&this.yearDisplay&&(this.monthDisplay.style.opacity="1",this.yearDisplay.style.opacity="1"),this.yearPickerOffsetTemporary=0)}handleMonthPickerClick(e){if(!e.target.classList.contains("calendar__picker-month-option"))return;const t=parseInt(e.target.dataset.value);this.updateMonthPickerSelection(t),this.updateCurrentDate(0,void 0,t),this.togglePicker(!1)}updateMonthPickerSelection(e){const t=this.currentDate.getMonth();e<0?e=11:e%=12,this.pickerMonthContainer.children[t].classList.remove("calendar__picker-month-selected"),this.pickerMonthContainer.children[e].classList.add("calendar__picker-month-selected")}handleYearPickerClick(e){if(!e.target.classList.contains("calendar__picker-year-option"))return;this.yearPickerOffset+=this.yearPickerOffsetTemporary;const t=parseInt(e.target.innerText),a=parseInt(e.target.dataset.value);this.updateYearPickerSelection(t,a),this.updateCurrentDate(0,void 0,void 0,t),this.togglePicker(!1)}updateYearPickerSelection(e,t){if(void 0===t){for(let a=0;a<12;a++){let i=this.pickerYearContainer.children[a];if(parseInt(i.innerHTML)===e&&i.dataset.value){t=parseInt(i.dataset.value);break}}if(void 0===t)return}this.removeYearPickerSelection(),this.pickerYearContainer.children[t].classList.add("calendar__picker-year-selected")}removeYearPickerSelection(){for(let e=0;e<12;e++)this.pickerYearContainer.children[e].classList.contains("calendar__picker-year-selected")&&this.pickerYearContainer.children[e].classList.remove("calendar__picker-year-selected")}generatePickerYears(){const e=this.today.getFullYear()+this.yearPickerOffset+this.yearPickerOffsetTemporary;let t=0;for(let a=e-4;a<=e+7;a++){this.pickerYearContainer.children[t].innerText=a.toString(),t++}}handleYearChevronLeftClick(){this.yearPickerOffsetTemporary-=12,this.generatePickerYears(),this.removeYearPickerSelection(),this.updateYearPickerSelection(this.currentDate.getFullYear())}handleYearChevronRightClick(){this.yearPickerOffsetTemporary+=12,this.generatePickerYears(),this.removeYearPickerSelection(),this.updateYearPickerSelection(this.currentDate.getFullYear())}handleCalendarDayClick(e){if(!(e.target.classList.contains("calendar__day-box")||e.target.classList.contains("calendar__day-text")||e.target.classList.contains("calendar__day-box-today")||e.target.classList.contains("calendar__day-bullet"))||e.target.parentElement.classList.contains("calendar__day-selected"))return;if(this.oldSelectedNode&&!this.oldSelectedNode[0])return;let t,a;t=e.target.parentElement.innerText,a=parseInt(t,10),this.removeOldDaySelection(),t&&(this.updateCurrentDate(0,a),Object.assign(this.daysIn_CurrentMonth[a-1],{selected:!0}),this.rerenderSelectedDay(e.target.parentElement,a,!0))}getDateEvents(e){return this.filteredEventsThisMonth.filter(t=>{const a=new Date(t.start).getDate(),i=new Date(t.end).getDate();return e.getDate()>=a&&e.getDate()<=i})}getMonthEvents(){return this.filteredEventsThisMonth}removeOldDaySelection(){this.oldSelectedNode&&(Object.assign(this.daysIn_CurrentMonth[this.oldSelectedNode[1]-1],{selected:!1}),this.rerenderSelectedDay(this.oldSelectedNode[0],this.oldSelectedNode[1]))}handlePrevMonthButtonClick(){const e=this.currentDate.getMonth()-1;this.currentDate.getFullYear()<=this.today.getFullYear()+this.yearPickerOffset-4&&e<0&&(this.yearPickerOffset-=12,this.generatePickerYears()),e<0&&this.updateYearPickerSelection(this.currentDate.getFullYear()-1),this.updateMonthPickerSelection(e),this.updateCurrentDate(-1),this.togglePicker(!1)}handleNextMonthButtonClick(){const e=this.currentDate.getMonth()+1;this.currentDate.getFullYear()>=this.today.getFullYear()+this.yearPickerOffset+7&&e>11&&(this.yearPickerOffset+=12,this.generatePickerYears()),e>11&&this.updateYearPickerSelection(this.currentDate.getFullYear()+1),this.updateMonthPickerSelection(e),this.updateCurrentDate(1),this.togglePicker(!1)}updateCurrentDate(e,t,a,i){this.currentDate=new Date(i||this.currentDate.getFullYear(),null!=a?a:this.currentDate.getMonth()+e,0===e&&t?t:1),(0!==e||null!=a||i)&&(this.updateCalendar(!0),this.monthChanged&&this.monthChanged(this.currentDate,this.getMonthEvents())),this.dateChanged&&this.dateChanged(this.currentDate,this.getDateEvents(this.currentDate))}updateMonthYear(){this.oldSelectedNode=null,this.monthDisplay.innerHTML=new Intl.DateTimeFormat("default",{month:this.monthDisplayType}).format(this.currentDate),this.yearDisplay.innerHTML=this.currentDate.getFullYear().toString()}generateWeekdays(){let e="";for(let t=0;t<7;t++)e+=`\n        <div class="calendar__weekday">${this.weekdays[(t+this.startWeekday)%7]}</div>\n      `;this.calendarWeekdays.innerHTML=e}generateDays(){this.numOfDays_PrevMonth=new Date(this.currentDate.getFullYear(),this.currentDate.getMonth(),0).getDate(),this.firstDay_CurrentMonth=new Date(this.currentDate.getFullYear(),this.currentDate.getMonth(),1).getDay(),this.numOfDays_CurrentMonth=new Date(this.currentDate.getFullYear(),this.currentDate.getMonth()+1,0).getDate();for(let e=0;e<this.numOfDays_CurrentMonth;e++)this.daysIn_CurrentMonth.push({day:e+1,selected:!1})}renderDays(){let e=0;const t=this.currentDate.getFullYear(),a=this.currentDate.getMonth();let i;this.filteredEventsThisMonth=this.eventsData.filter(e=>{const i=new Date(e.start);return i.getFullYear()===t&&i.getMonth()===a}),this.eventDayMap={},this.filteredEventsThisMonth.forEach(e=>{const t=new Date(e.start).getDate(),a=new Date(e.end).getDate();for(let e=t;e<=a;e++)this.eventDayMap[e]=!0}),i=this.firstDay_CurrentMonth<this.startWeekday?7+this.firstDay_CurrentMonth-this.startWeekday:this.firstDay_CurrentMonth-this.startWeekday;let r="";for(let t=0;t<i;t++)r+=`\n        <div class="calendar__day calendar__day-other">${this.numOfDays_PrevMonth+1-i+t}</div>\n      `,e++;let n=this.today.getFullYear()===this.currentDate.getFullYear(),s=this.today.getMonth()===this.currentDate.getMonth()&&n;this.daysIn_CurrentMonth.forEach(t=>{let a=s&&t.day===this.today.getDate();r+=`\n        <div class="calendar__day calendar__day-active${a?" calendar__day-today":""}${this.eventDayMap[t.day]?" calendar__day-event":" calendar__day-no-event"}${t.selected?" calendar__day-selected":""}">\n          <span class="calendar__day-text">${t.day}</span>\n          <div class="calendar__day-box"></div>\n          <div class="calendar__day-bullet"></div>\n          ${a?'<div class="calendar__day-box-today"></div>':""}\n        </div>\n      `,e++});for(let t=0;t<this.DAYS_TO_DISPLAY-e;t++)r+=`\n        <div class="calendar__day calendar__day-other">${t+1}</div>\n      `;this.calendarDays.innerHTML=r}rerenderSelectedDay(e,t,a){let i=e.previousElementSibling,r=this.today.getFullYear()===this.currentDate.getFullYear(),n=this.today.getMonth()===this.currentDate.getMonth()&&r&&t===this.today.getDate(),s=document.createElement("div");s.className+=`calendar__day calendar__day-active${n?" calendar__day-today":""}${this.eventDayMap[t]?" calendar__day-event":" calendar__day-no-event"}${this.daysIn_CurrentMonth[t-1].selected?" calendar__day-selected":""}`,s.innerHTML=`\n      <span class="calendar__day-text">${t}</span>\n      <div class="calendar__day-box"></div>\n      <div class="calendar__day-bullet"></div>\n      ${n?'<div class="calendar__day-box-today"></div>':""}\n    `,i?i.parentElement?i.parentElement.insertBefore(s,i.nextSibling):console.log("Previous element does not have parent"):this.calendarDays.insertBefore(s,e),a&&(this.oldSelectedNode=[s,t]),e.remove()}}}));

package.json

 {
   "name": "color-calendar",
-  "version": "0.0.1",
-  "description": "A customizable calendar widget with event handling",
-  "main": "dist/bundle.esm.js",
+  "version": "1.0.0",
+  "description": "A customizable events calendar widget library",
+  "main": "dist/bundle.cjs.js",
+  "module": "dist/bundle.esm.js",
+  "browser": "dist/bundle.js",
+  "typings": "dist/index.d.ts",
   "scripts": {
@@ -11,6 +14,7 @@ "start:js": "rollup -c -w",
     "build": "rollup -c && gulp",
+    "build:types": "tsc --declaration src/index.ts --declarationDir dist --emitDeclarationOnly",
     "clean": "rimraf dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "author": "Pawan Kolhe <[e-mail]>",
+  "author": "Pawan Kolhe <[e-mail]> (https://pawankolhe.com/)",
   "license": "MIT",
@@ -23,2 +27,4 @@ "devDependencies": {
     "@rollup/plugin-node-resolve": "^8.4.0",
+    "@rollup/plugin-strip": "^2.0.0",
+    "@rollup/plugin-typescript": "^5.0.2",
     "autoprefixer": "^9.8.5",
@@ -48,3 +54,4 @@ "babel-loader": "^8.1.0",
     "sass": "^1.26.10",
-    "sass-loader": "^9.0.2"
+    "sass-loader": "^9.0.2",
+    "typescript": "^3.9.7"
   },
@@ -51,0 +58,0 @@ "dependencies": {},

README.md

@@ -1,13 +0,299 @@
-# Color Calendar
-A customizable calendar component library 
+<p align="center"><img src="https://raw.githubusercontent.com/PawanKolhe/color-calendar/master/screenshots/logo.png" alt="logo" width="20%" /></p>
+<h1 align="center">Color Calendar</h1>
+<p align="center">
+    <img src="https://img.shields.io/npm/v/color-calendar?style=flat-square" alt="npm version" />
+    <img src="https://img.shields.io/npm/dw/color-calendar?style=flat-square" alt="npm downloads" />
+    <img src="https://img.shields.io/bundlephobia/min/color-calendar?style=flat-square" alt="size" />
+    <a href="https://www.jsdelivr.com/package/npm/color-calendar">
+        <img src="https://data.jsdelivr.com/v1/package/npm/color-calendar/badge" alt="jsdelivr" />
+    </a>
+    <img src="http://hits.dwyl.com/PawanKolhe/color-calendar.svg" alt="hit count" />
+    <img src="https://img.shields.io/npm/l/color-calendar?style=flat-square" alt="license" />
+</p>
+<p align="center">
+    A customizable events calendar component library. Checkout <a href="https://codesandbox.io/s/color-calendar-bnwdu">demo</a>.
+</p>
 
-![Color Calendar](https://i.ibb.co/rbM24hj/image.png)
+<!-- # Color Calendar
+![npm](https://img.shields.io/npm/v/color-calendar?style=flat-square)
+![npm](https://img.shields.io/npm/dw/color-calendar?style=flat-square)
+![npm bundle size](https://img.shields.io/bundlephobia/min/color-calendar?style=flat-square)
+[![](https://data.jsdelivr.com/v1/package/npm/color-calendar/badge)](https://www.jsdelivr.com/package/npm/color-calendar)
+![HitCount](http://hits.dwyl.com/PawanKolhe/color-calendar.svg)
+![NPM](https://img.shields.io/npm/l/color-calendar?style=flat-square) -->
 
-## Features
-- Add events to the calendar
-- Get events on clicked day
+![Color Calendar](https://raw.githubusercontent.com/PawanKolhe/color-calendar/master/screenshots/banner.PNG)
+
+---
+
+* [Features](#🚀-features)
+* [Getting Started](#📦-getting-started)
+    * [CDN](#cdn)
+    * [NPM](#npm)
+* [Usage](#🔨-usage)
+* [Options](#⚙️-options)
+* [Events](#🖱-events)
+* [Themes](#🎨-themes)
+* [License](#📜-license)
+
+---
+
+## 🚀 Features
+- Zero dependencies
+- Add events to calendar
+- Perform some action on calendar date change
+- Month and year picker built-in
 - Themes available
+- Customize using CSS variables or passing options parameters while creating calendar.
 - More coming soon...
 
-## Documentation
-- Coming soon...
+## 📦 Getting Started
+
+### CDN
+#### JavaScript
+```html
+<script src="https://cdn.jsdelivr.net/npm/color-calendar/dist/bundle.js">
+```
+Also available on [unpkg](https://unpkg.com/browse/color-calendar/dist/).
+
+#### CSS
+Pick a css file according to the theme you want.
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/color-calendar/dist/css/theme-basic.css">
+<!-- or -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/color-calendar/dist/css/theme-glass.css">
+```
+
+#### Fonts
+Get fonts from [Google Fonts](https://fonts.google.com/)
+```html
+<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
+```
+Check what fonts the [theme](#themes) needs or pass your own fonts in [options](#options-fonts).
+
+### NPM
+#### Installation
+```bash
+npm i color-calendar
+```
+#### Import
+```javascript
+import Calendar from 'color-calendar';
+```
+
+#### CSS
+```javascript
+import './node_modules/color-calendar/dist/css/theme-<THEME-NAME>.css';
+```
+
+Then add fonts.
+
+## 🔨 Usage
+### JavaScript
+```javascript
+new Calendar()
+```
+Or you can pass in **options**.
+```javascript
+new Calendar({
+    id: '#myCalendar'
+})
+```
+
+### HTML
+```html
+<div id="myCalendar"></div>
+```
+
+<a id="options"></a>
+## ⚙️ Options
+
+### `id`
+Type: `String`  
+Default: `#color-calendar`  
+
+Selector referencing HTMLElement where the calendar instance will bind to.
+
+### `eventsData`
+Type: `Array[...Objects]`  
+Default: `null`  
+
+```javascript
+[
+    {
+      start: '2020-08-17T06:00:00',
+      end: '2020-08-18T20:30:00',
+      ...
+    },
+    ...
+]
+```
+
+Array of objects containing events information. Properties `start` and `end` care *required* for each event in the [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) date and time format.
+
+### `theme`
+Type: `String`  
+Default: `basic`  
+Options: `basic` | `glass`  
+
+Choose from available themes.
+
+### `primaryColor`
+Type: `String`  
+Default: *based on theme*  
+Example: `#1a237e`  
+
+Main color accent of calendar. *Pick a color in rgb, hex or hsl format.*
+
+### `headerColor`
+Type: `String`  
+Default: *based on theme*  
+Example: `rgb(0, 102, 0)`  
+
+Color of header text.
+
+### `headerBackgroundColor`
+Type: `String`  
+Default: *based on theme*  
+Example: `black`  
+
+Background color of header. *Only works on some themes.*
+
+### `weekdaysColor`
+Type: `String`  
+Default: *based on theme*  
+
+Color of weekdays text.  *Only works on some themes.*
+
+### `weekdayType`
+Type: `String`  
+Default: `long-lower`  
+Options: `short` | `long-lower` | `long-upper`  
+
+Select how weekdays will be displayed. E.g. M, Mon, or MON.
+
+### `monthDisplayType`
+Type: `String`  
+Default: `long`  
+Options: `short` | `long`  
+
+Select how month will be displayed in header. E.g. Feb, February.
+
+### `startWeekday`
+Type: `Number`  
+Default: `0`  
+Options: `0` | `1` | `2` | `3` | `4` | `5` | `6`   
+
+Starting weekday. Mapping: 0 (Sun), 1 (Mon), 2 (Tues), 3 (Wed), 4 (Thurs), 5 (Fri), 6 (Sat)
+
+<a id="options-fonts"></a>
+### `fontFamilyHeader`
+Type: `String`  
+Default: *based on theme*  
+Example value: `'Open Sans', sans-serif`  
+
+Font of calendar header text.
+
+### `fontFamilyWeekdays`
+Type: `String`  
+Default: *based on theme*  
+
+Font of calendar weekdays text.
+
+### `fontFamilyBody`
+Type: `String`  
+Default: *based on theme*  
+
+Font of calendar days as well as month and year picker text.
+
+### `dropShadow`
+Type: `Boolean`  
+Default: `true`  
+
+Whether to have a calendar drop shadow.
+
+### `border`
+Type: `String`  
+Default: *based on theme*  
+Example value: `5px solid black`  
+
+Set CSS style of border.
+
+### `borderRadius`
+Type: `String`  
+Default: `0.5rem`  
+
+Set CSS border radius of calendar.
+
+## 🖱 Events
+
+### `dateChanged`
+Type: `Function`  
+Props:
+- `currentDate`
+    - Type: `Date`
+    - Currently selected date
+- `filteredDateEvents`
+    - Type: `EventData[]`
+    - All events on that particular date
+```typescript
+const options = {
+    ...
+    dateChanged: (currentDate?: Date, filteredDateEvents?: EventData[]) => {
+        // do something
+    };
+    ...
+}
+```
+
+Emitted when the selected date is changed.
+
+### `monthChanged`
+Type: `Function`  
+Props:
+- `currentDate`
+    - Type: `Date`
+    - Currently selected date
+- `filteredMonthEvents`
+    - Type: `EventData[]`
+    - All events on that particular month
+
+Emitted when the current month is changed.
+
+<!-- ## 🔧 Methods
+Coming soon... -->
+
+<a id="themes"></a>
+## 🎨 Themes
+Currently 2 themes available. More on the way.
+
+### `basic`
+<img src="https://raw.githubusercontent.com/PawanKolhe/color-calendar/master/screenshots/theme-basic.PNG" alt="Basic Theme" width="400" />  
+
+#### CSS Custom Properties
+`--cal-color-primary`: #0440a0;  
+`--cal-font-family-header`: "Work Sans", sans-serif;  
+`--cal-font-family-weekdays`: "Work Sans", sans-serif;  
+`--cal-font-family-body`: "Work Sans", sans-serif;  
+`--cal-drop-shadow`: 0 7px 30px -10px rgba(150, 170, 180, 0.5);  
+`--cal-border`: 5px solid rgba(4, 64, 160, 0.1);  
+`--cal-border-radius`: 0.5rem;  
+`--cal-header-color`: black;  
+`--cal-weekdays-color`: black;  
+
+### `glass`
+<img src="https://raw.githubusercontent.com/PawanKolhe/color-calendar/master/screenshots/theme-glass.PNG" alt="Glass Theme" width="400" />  
+
+#### CSS Custom Properties
+`--cal-color-primary`: #EC407A;  
+`--cal-font-family-header`: 'Open Sans', sans-serif;  
+`--cal-font-family-weekdays`: 'Open Sans', sans-serif;  
+`--cal-font-family-body`: 'Open Sans', sans-serif;  
+`--cal-drop-shadow`: 0 7px 30px -10px rgba(150, 170, 180, 0.5);  
+`--cal-border`: none;  
+`--cal-border-radius`: 0.5rem;  
+`--cal-header-color`: white;  
+`--cal-header-background-color`: rgba(0, 0, 0, 0.3);  
+
+## 📜 License
+This software is open source, licensed under the [MIT License](https://github.com/PawanKolhe/color-calendar/blob/master/LICENSE).

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

97902

increased by133.35%

Lines of code

1127

increased by140.81%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

300

increased by2042.86%

Worsened metrics

Dev dependency count

33

increased by10%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes