New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

color-calendar

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

color-calendar - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

2

dist/bundle.cjs.js

@@ -7,2 +7,2 @@ /**

"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()}};
"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(`[COLOR-CALENDAR] 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.togglePicker(!1),this.configureStylePreferences(),this.addEventListeners(),this.reset(new Date)}reset(e){this.currentDate=e||new Date,this.clearCalendarDays(),this.updateMonthYear(),this.updateMonthPickerSelection(this.currentDate.getMonth()),this.generatePickerYears(),this.updateYearPickerSelection(this.currentDate.getFullYear(),4),this.generateWeekdays(),this.generateDays(),this.selectDayInitial(!!e),this.renderDays(),this.setOldSelectedNode(),this.dateChanged&&this.dateChanged(this.currentDate,this.getDateEvents(this.currentDate)),this.monthChanged&&this.monthChanged(this.currentDate,this.getMonthEvents())}setDate(e){e&&(e instanceof Date?this.reset(e):this.reset(new Date(e)))}getSelectedDate(){return this.currentDate}addEventListeners(){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))}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(e){if(e)this.daysIn_CurrentMonth[this.currentDate.getDate()-1].selected=!0;else{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.setDate(this.currentDate),this.eventsData.length}addEventsData(e=[]){const t=this.eventsData.push(...e);return this.setDate(this.currentDate),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){e<0?e=11:e%=12,this.removeMonthPickerSelection(),this.pickerMonthContainer.children[e].classList.add("calendar__picker-month-selected")}removeMonthPickerSelection(){for(let e=0;e<12;e++)this.pickerMonthContainer.children[e].classList.contains("calendar__picker-month-selected")&&this.pickerMonthContainer.children[e].classList.remove("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-bullet"></div>\n ${a?'<div class="calendar__day-box-today"></div>':""}\n <div class="calendar__day-box"></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()}};

2

dist/bundle.esm.js

@@ -7,2 +7,2 @@ /**

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()}}
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(`[COLOR-CALENDAR] 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.togglePicker(!1),this.configureStylePreferences(),this.addEventListeners(),this.reset(new Date)}reset(e){this.currentDate=e||new Date,this.clearCalendarDays(),this.updateMonthYear(),this.updateMonthPickerSelection(this.currentDate.getMonth()),this.generatePickerYears(),this.updateYearPickerSelection(this.currentDate.getFullYear(),4),this.generateWeekdays(),this.generateDays(),this.selectDayInitial(!!e),this.renderDays(),this.setOldSelectedNode(),this.dateChanged&&this.dateChanged(this.currentDate,this.getDateEvents(this.currentDate)),this.monthChanged&&this.monthChanged(this.currentDate,this.getMonthEvents())}setDate(e){e&&(e instanceof Date?this.reset(e):this.reset(new Date(e)))}getSelectedDate(){return this.currentDate}addEventListeners(){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))}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(e){if(e)this.daysIn_CurrentMonth[this.currentDate.getDate()-1].selected=!0;else{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.setDate(this.currentDate),this.eventsData.length}addEventsData(e=[]){const t=this.eventsData.push(...e);return this.setDate(this.currentDate),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){e<0?e=11:e%=12,this.removeMonthPickerSelection(),this.pickerMonthContainer.children[e].classList.add("calendar__picker-month-selected")}removeMonthPickerSelection(){for(let e=0;e<12;e++)this.pickerMonthContainer.children[e].classList.contains("calendar__picker-month-selected")&&this.pickerMonthContainer.children[e].classList.remove("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-bullet"></div>\n ${a?'<div class="calendar__day-box-today"></div>':""}\n <div class="calendar__day-box"></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()}}

2

dist/bundle.js

@@ -7,2 +7,2 @@ /**

!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()}}}));
!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(`[COLOR-CALENDAR] 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.togglePicker(!1),this.configureStylePreferences(),this.addEventListeners(),this.reset(new Date)}reset(e){this.currentDate=e||new Date,this.clearCalendarDays(),this.updateMonthYear(),this.updateMonthPickerSelection(this.currentDate.getMonth()),this.generatePickerYears(),this.updateYearPickerSelection(this.currentDate.getFullYear(),4),this.generateWeekdays(),this.generateDays(),this.selectDayInitial(!!e),this.renderDays(),this.setOldSelectedNode(),this.dateChanged&&this.dateChanged(this.currentDate,this.getDateEvents(this.currentDate)),this.monthChanged&&this.monthChanged(this.currentDate,this.getMonthEvents())}setDate(e){e&&(e instanceof Date?this.reset(e):this.reset(new Date(e)))}getSelectedDate(){return this.currentDate}addEventListeners(){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))}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(e){if(e)this.daysIn_CurrentMonth[this.currentDate.getDate()-1].selected=!0;else{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.setDate(this.currentDate),this.eventsData.length}addEventsData(e=[]){const t=this.eventsData.push(...e);return this.setDate(this.currentDate),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){e<0?e=11:e%=12,this.removeMonthPickerSelection(),this.pickerMonthContainer.children[e].classList.add("calendar__picker-month-selected")}removeMonthPickerSelection(){for(let e=0;e<12;e++)this.pickerMonthContainer.children[e].classList.contains("calendar__picker-month-selected")&&this.pickerMonthContainer.children[e].classList.remove("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-bullet"></div>\n ${a?'<div class="calendar__day-box-today"></div>':""}\n <div class="calendar__day-box"></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()}}}));

14

dist/index.d.ts

@@ -21,3 +21,3 @@ export interface CalendarOptions {

}
export interface EventData {

@@ -41,3 +41,2 @@ start: string,

export type StartWeekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;

@@ -98,4 +97,6 @@ export default class Calendar {

constructor(options?: CalendarOptions);
resetCalendar(): void;
initializeLayout(): void;
reset(date: Date): void;
setDate(date: Date): void;
getSelectedDate(): Date;
addEventListeners(): void;
/** Configure calendar style preferences */

@@ -107,6 +108,6 @@ configureStylePreferences(): void;

setOldSelectedNode(): void;
selectDayInitial(): void;
selectDayInitial(setDate?: boolean): void;
getEventsData(): any;
/** Set new events data array */
setEventsData(data: EventData[]): EventData[];
setEventsData(events: EventData[]): number;
/** Add events to existing events data array */

@@ -119,2 +120,3 @@ addEventsData(newEvents?: EventData[]): number;

updateMonthPickerSelection(newMonthValue: number): void;
removeMonthPickerSelection(): void;
handleYearPickerClick(e: any): void;

@@ -121,0 +123,0 @@ updateYearPickerSelection(newYearValue: number, newYearIndex?: number): void;

6

package.json
{
"name": "color-calendar",
"version": "1.0.0",
"version": "1.0.1",
"description": "A customizable events calendar widget library",

@@ -8,3 +8,3 @@ "main": "dist/bundle.cjs.js",

"browser": "dist/bundle.js",
"typings": "dist/index.d.ts",
"types": "dist/index.d.ts",
"scripts": {

@@ -14,3 +14,3 @@ "start:js": "rollup -c -w",

"prebuild": "rimraf dist",
"build": "rollup -c && gulp",
"build": "rollup -c && gulp && npm run build:types",
"build:types": "tsc --declaration src/index.ts --declarationDir dist --emitDeclarationOnly",

@@ -17,0 +17,0 @@ "clean": "rimraf dist",

120

README.md
<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" />
<h1 align="center">Color Calendar</h1>
</p>
<p align="center">
<a href="https://www.npmjs.com/package/color-calendar">
<img src="https://img.shields.io/npm/v/color-calendar?style=flat-square" alt="npm version" />
</a>
<a href="https://www.npmjs.com/package/color-calendar">
<img src="https://img.shields.io/npm/dw/color-calendar?style=flat-square" alt="npm downloads" />
</a>
<img src="https://img.shields.io/bundlephobia/min/color-calendar?style=flat-square" alt="size" />

@@ -10,3 +16,3 @@ <a href="https://www.jsdelivr.com/package/npm/color-calendar">

</a>
<img src="http://hits.dwyl.com/PawanKolhe/color-calendar.svg" alt="hit count" />
<img src="https://hitcounter.pythonanywhere.com/count/tag.svg?url=https%3A%2F%2Fgithub.com%2FPawanKolhe%2Fcolor-calendar" alt="Hits">
<img src="https://img.shields.io/npm/l/color-calendar?style=flat-square" alt="license" />

@@ -28,16 +34,15 @@ </p>

---
* [Features](#🚀-features)
* [Getting Started](#📦-getting-started)
* [Features](#features)
* [Getting Started](#getting-started)
* [CDN](#cdn)
* [NPM](#npm)
* [Usage](#🔨-usage)
* [Options](#⚙️-options)
* [Events](#🖱-events)
* [Themes](#🎨-themes)
* [License](#📜-license)
* [Usage](#usage)
* [Options](#options)
* [Events](#events)
* [Methods](#methods)
* [Types](#types)
* [Themes](#themes)
* [License](#license)
---
<a id="features"></a>
## 🚀 Features

@@ -52,2 +57,3 @@ - Zero dependencies

<a id="getting-started"></a>
## 📦 Getting Started

@@ -78,2 +84,3 @@

### NPM
> _You might need to use a module bundler such as webpack, rollup, parcel, etc._
#### Installation

@@ -90,3 +97,3 @@ ```bash

```javascript
import './node_modules/color-calendar/dist/css/theme-<THEME-NAME>.css';
import 'color-calendar/dist/css/theme-<THEME-NAME>.css';
```

@@ -96,2 +103,3 @@

<a id="usage"></a>
## 🔨 Usage

@@ -105,3 +113,3 @@ ### JavaScript

new Calendar({
id: '#myCalendar'
id: '#color-calendar'
})

@@ -112,3 +120,3 @@ ```

```html
<div id="myCalendar"></div>
<div id="color-calendar"></div>
```

@@ -126,3 +134,3 @@

### `eventsData`
Type: `Array[...Objects]`
Type: [`EventData`](#event-data)[]
Default: `null`

@@ -133,4 +141,5 @@

{
start: '2020-08-17T06:00:00',
end: '2020-08-18T20:30:00',
start: '2020-08-17T06:00:00',
end: '2020-08-18T20:30:00',
name: 'Blockchain 101'
...

@@ -142,3 +151,4 @@ },

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.
Array of objects containing events information.
> Note: Properties `start` and `end` are *required* for each event in the [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) date and time format. You can _optionally_ choose to add other properties.

@@ -239,2 +249,3 @@ ### `theme`

<a id="events"></a>
## 🖱 Events

@@ -275,5 +286,65 @@

<!-- ## 🔧 Methods
Coming soon... -->
<a id="methods"></a>
## 🔧 Methods
### `reset()`
Return:
- Type: `void`
Reset calendar to today's date.
```javascript
let myCal = new Calendar();
myCal.reset();
```
### `setDate()`
Props:
| Props | Type | Required | Description |
|-------|------|----------|--------------------|
| date | Date | required | New date to be set |
Return:
- Type: `void`
Set new selected date.
### `getSelectedDate()`
Return:
- Type: `Date`
- Description: `Currently selected date`
Get currently selected date.
### `setEventsData()`
Props:
| Props | Type | Required | Description |
|--------|------------|----------|------------------|
| events | [EventData](#eventdata)[] | required | Events to be set |
Return:
- Type: `Number`
- Description: `Number of events set`
Set a new events array.
### `addEventsData()`
Props:
| Props | Type | Required | Description |
|--------|------------|----------|--------------------|
| events | [EventData](#eventdata)[] | required | Events to be added |
Return:
- Type: `Number`
- Description: `Number of events added`
Add events of the events array.
<a id="types"></a>
## 💎 Types
<a id="event-data"></a>
### `EventData`
```javascript
interface EventData {
start: string,
end: string,
[key: string]: any,
}
```
<a id="themes"></a>

@@ -311,3 +382,4 @@ ## 🎨 Themes

<a id="license"></a>
## 📜 License
This software is open source, licensed under the [MIT License](https://github.com/PawanKolhe/color-calendar/blob/master/LICENSE).
dist/css/theme-basic.css

Sorry, the diff of this file is not supported yet

dist/css/theme-glass.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc