Custom Dynamic Calender / Kalender with JS

HTML
<!DOCTYPE html> <html> <head> <title>Dynamic Kalender v1.0</title> </head> <body> <div class="kalender-wrapper-main"> <div id="kalenderMonthIndex"></div> <div class="kalender-head"> <span class="prev" title="Previous" onclick="toggleMonths(this)"> <span class="txt" id="prev"> < </span> </span> <span class="currentMonth" title=""> <span class="txt" id="kalenderCurrentMonth" count=""></span> </span> <span class="next" title="Next" onclick="toggleMonths(this)"> <span class="txt" id="next"> > </span> </span> </div> <div class="kalender-body"> <div id="kalender-weekDays"></div> <div class="kalender-body-main"></div> </div> <div class="kalender-footer"> <span class="currentYear txt2" id="kalenderCyear"></span> </div> </div> <div class="title">Kalender v1.0 </div> <div class="copy">© Kushal Neupane </div> <div id="console">Click a date</div> </body> </html>
CSS
*{ margin: 0; } body{ position: relative; background-color: #ebebeb; } .kalender-wrapper-main{ position: absolute; left: 30%; margin-left: -150px; top: 50px; display: block; width: 300px; height: 380px; background-color: #eeeeee; border-radius: 5px; z-index: 10000; box-shadow: 0px 0px 5px #888; } #kalenderMonthIndex{ display: none; } .kalender-head{ position: relative; width: 100%; clear: both; height: 50px; background-color: #e74c3c; font-size: 18px; color: #ffffff; border-radius: 5px 5px 0px 0px; z-index: 5000; } .kalender-body{ position: relative; width: 100%; clear: both; height: 280px; z-index: 5000; } #kalender-weekDays{ position: relative; z-index: 5000; overflow: auto; } .kalender-body-main{ position: relative; z-index: 2000; width: 100%; opacity:0.8; overflow: auto; transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; } .kalender-footer{ position: relative; width: 100%; clear: both; height: 50px; background-color: #e74c3c; text-align: center; color: #eee; border-radius: 0px 0px 5px 5px; z-index: 5000; } .kalender-head .prev,.next{ display: block; width: 20%; text-align: center; float: left; cursor: pointer; height: 100%; } .kalender-head .prev{ border-radius: 5px 0 0 0; } .kalender-head .next{ border-radius: 0 5px 0 0; } .kalender-head .prev:hover,.next:hover{ background-color: #c0392b; } .kalender-head .currentMonth{ display: block; width: 60%; text-align: center; float: left; height: 100%; } .txt{ display: block; margin-top: 12px; } .txt2{ position: relative; top: 12px; font-size: 20px; font-family: "serif"; transition: text-shadow 0.2s ease; } .txt2:hover{ text-shadow: 0px 10px 5px #444; } .kalender-body .day,.wDay{ display: block; float: left; height: 40px; width: 42.85714285714286px; text-align: center; background-color: rgba(52, 73, 94,0.8); cursor: pointer; color: #ffffff; box-shadow: -1px -1px 0px rgba(52, 73, 94,0.4);; transition: background-color 0.2s ease-in-out; -webkit-transition: background-color 0.2s ease-in-out; -moz-transition: background-color 0.2s ease-in-out; -o-transition: background-color 0.2s ease-in-out; } .wDay{ box-shadow:inset 0px -1px 0px #666; background-color: rgba(52, 73, 94,1); } .kalender-body .day:hover{ background-color: rgba(52, 73, 94,1); } .day.highlight{ background-color: rgba(52, 73, 94,1); } .day.disabled{ cursor: default; color: #bdbdbd; background-color: rgba(52, 73, 94,0.8); } .kalender-body .day.disabled:hover{ background-color: rgba(52, 73, 94,0.8); } .kalender-body .txt{ margin-top: 10px; } .theExtraBoxes{ position: relative; top: 8px; } .copy,.title{ position: absolute; top: 450px; left: 30%; width: 300px; font-size:12px; text-align: center; margin-left: -150px; font-family: sans-serif; color:#2c3e50; font-weight:bold; } .title{ top:15px; font-size:20px; } #console{ display:block; position:absolute; left:50%; background-color:#e74c3c; border-radius:5px; color:#eee; padding:10px; top:50px; box-sizing:border-box; width:400px; font-family:sans-serif; text-align:center; box-shadow:0px 5px 5px #e74c3c; }
JAVASCRIPT
//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;
Expand for more options Login