Custom Dynamic Calender / Kalender with JS

//Kushal's Calender (Kalender) v1.0 var now = new Date(), months = ["January","February","March","April","May","June","July","August" ,"September","October","November","December"], allDays = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']; //an object related to date var dateDetails = { totalDays : function(givenMonth){ return new Date(now.getFullYear(), givenMonth+1, 0).getDate(); }, currentMonth : function(){ return now.getMonth(); }, currentYear : function(){ return now.getFullYear(); }, currentDate : function(){ return now.getDate(); }, getTheDay : function(year,month,date){ //returns array of day in number and letter var theDay = new Date(year,month,date).getDay(); var rValue = [theDay,allDays[theDay]]; return rValue; } }; //self explanatory variable var thisMonth = dateDetails.currentMonth(); var daysCount,toDisable,todaysDate,totalBoxes; function calCulate(givenMonth){ daysCount = dateDetails.totalDays(givenMonth); //total days in the chosen month totalBoxes = 42; //total boxes in the kalender toDisable = totalBoxes - daysCount; //count of extra boxes in the kalender todaysDate = dateDetails.currentDate(); // self explanatory } //an object related to the header of kalender var kalenderHead = { cMonth : function(){ return document.getElementById("kalenderCurrentMonth"); }, getCmonth : function(){ return parseInt(document.getElementById("kalenderCurrentMonth").innerHTML); }, setCmonth : function(value,title){ this.cMonth().innerHTML = value; this.cMonth().parentNode.setAttribute("title",title); } }; //a function to clear the kalender function clearKalender(className){ document.getElementsByClassName(className)[0].innerHTML=""; } var fadeTo; //the fade animation controller //the main function function addCalenderDates(className,givenMonth){ //the targeted element to add the boxes to var element = document.getElementsByClassName(className)[0]; //index of 1st day of month in a week var firstDayInWeek = dateDetails.getTheDay(dateDetails.currentYear(),givenMonth,1); //clear the previous timeout clearTimeout(fadeTo); element.style.opacity = 0.8; //clear the kalender box field every time user clicks next or previous clearKalender(className); //refreshing the calculation calCulate(givenMonth); //to keep track of chosen month kalenderHead.cMonth().setAttribute("count",givenMonth); kalenderHead.setCmonth(months[givenMonth].substring(0,3),months[givenMonth]); //add disabled boxes before the start of 1st day of the month for (var k=1; k <= firstDayInWeek[0]; k++) { element.innerHTML += addBox("",true); } for( var i=1; i <= totalBoxes; i++ ){ if( i <= (totalBoxes - toDisable) ){ //the main kalender boxes element.innerHTML += addBox(i); }else{ // the extra boxes element.innerHTML += addBox("",true); } } //assign the timeout fadeTo = setTimeout(function(){element.style.opacity = 1;},200); //call click handler kalenderDateClickHandler(); } //an object to keep track of currently chosen month var kalenderMonth = { set : function(monthVal){ document.getElementById("kalenderMonthIndex").innerHTML = monthVal; }, get : function(){ return parseInt(document.getElementById("kalenderMonthIndex").innerHTML); } }; // the main function to add boxes in the kalender function addBox(value,disabled = false){ var r = "<span"; if(value !== "" ) r += " ref =\""+value+"\" "; r += " class=\"day "; if( value == todaysDate && (thisMonth == kalenderMonth.get()) ) { r += "highlight"} if(!disabled) r += "\">"; if(disabled && value !== "" ) r += "disabled\">"; //for extra boxes with number if(disabled && value === "") r+= "disabled\"><span class='theExtraBoxes'>&odot;</span>"; //for extra boxes which is empty r += "<span class=\"txt\">"; if(value <= 32 ) r += value; // maximum day in a month is 32 so r += "</span>"; r += "</span>"; return r; } //next and previous actions function toggleMonths(el){ var cName = el.className, changedMonth, monthIndex = kalenderMonth.get(), ok = false; if( cName == "prev"){ if(monthIndex > 0 ) changedMonth = monthIndex-1; else changedMonth = 11; //if reached to January then restart from December } if( cName == "next"){ if(monthIndex < 11 ) changedMonth = monthIndex+1; else changedMonth = 0;//if reached to December then restart from Januaray } //changing the tracking count in the html div kalenderMonth.set(changedMonth); //call the main function to add boxes onto kalender addCalenderDates("kalender-body-main",changedMonth); } //adds days name in the kalender function addWeekDays(){ var elem = document.getElementById("kalender-weekDays"); for( var i=0; i <allDays.length ; i++ ){ elem.innerHTML += "<span class=\"wDay\" title=\""+allDays[i]+"\"><span class=\"txt\">"+allDays[i].substring(0,2)+"</span></span>"; } } function kalenderDateClickHandler(){ //the boxes var days = document.getElementsByClassName("day"); for (var i = days.length - 1; i >= 0; i--) { if( days[i].hasAttribute("ref") ){ days[i].onclick = dateClicked; } } } //task for further development when a date in the kalender is clicked //for instance this function can be used to fetch data from database dynamically using user clicked date function dateClicked(){ //the clicked button / box details for further use var theYear = dateDetails.currentYear(), //the year theMonth = [kalenderMonth.get(),months[kalenderMonth.get()]], //array of chosen month [index, string] eg.[1,"February"] theDate = parseInt(this.getAttribute("ref")),//chosen date theDayInWeek = dateDetails.getTheDay(theYear,theMonth[0],theDate); //the day in the week document.getElementById("console").innerHTML = theDate+" , "+theMonth[1]+" , "+theYear+" , "+theDayInWeek[1]; } //the main function to call on load of the kalender function callKalender(){ //current year in the footer document.getElementById("kalenderCyear").innerHTML = dateDetails.currentYear(); //days name in the kalender addWeekDays(); //by default set to current month kalenderMonth.set(thisMonth); //by default current month's called addCalenderDates("kalender-body-main",thisMonth); //click handler kalenderDateClickHandler(); } window.onload = callKalender;