Author: | Deansy |
---|---|
Views Total: | 8,119 views |
Official Page: | Go to website |
Last Update: | January 23, 2015 |
License: | MIT |
Preview:

Description:
A HTML/JavaScript/CSS implement of simple, responsive month calendar.
How to use it:
Create controls which allow you to toggle between months.
<div class="controls"> <p onclick="previousMonth()" style="float: left;"> < </p> <p id="current-month" style="float: left; padding-left:10px; padding-right:10px;">January</p> <p onclick="nextMonth()" style="float: right;"> > </p> </div>
Create an empty container to place the month calendar.
<div class="calendar" id="calendar"> </div>
The core JavaScript to render a month calendar within the container element.
<div class="calendar" id="calendar"> </div>// Globally head date object for the month shown var date = new Date(); date.setDate(1); date.setMonth(0); window.onload = function() { // Add the current month on load createMonth(); }; // Converts day ids to the relevant string function dayOfWeekAsString(dayIndex) { return ["Sun", "Mon","Tue","Wed","Thu","Fri","Sat"][dayIndex]; } // Converts month ids to the relevant string function monthsAsString(monthIndex) { return ["January", "Febuary","March","April","May","June","July", "August", "September", "October", "November", "December"][monthIndex]; } // Creates a day element function createCalendarDay(num, day) { var currentCalendar = document.getElementById("calendar"); var newDay = document.createElement("div"); var date = document.createElement("p"); date.innerHTML = num; var dayElement = document.createElement("p"); dayElement.innerHTML = day; newDay.className = "calendar-day"; newDay.appendChild(date); newDay.appendChild(dayElement); currentCalendar.appendChild(newDay); } // Clears all days from the calendar function clearCalendar() { var currentCalendar = document.getElementById("calendar"); currentCalendar.innerHTML = ""; } // Clears the calendar and shows the next month function nextMonth() { clearCalendar(); date.setMonth(date.getMonth() + 1); createMonth(date.getMonth()); } // Clears the calendar and shows the previous month function previousMonth() { clearCalendar(); date.setMonth(date.getMonth() - 1); var val = date.getMonth(); createMonth(date.getMonth()); } // Creates and populates all of the days to make up the month function createMonth() { var currentCalendar = document.getElementById("calendar"); var dateObject = new Date(); dateObject.setDate(date.getDate()); dateObject.setMonth(date.getMonth()); dateObject.setYear(date.getFullYear()); createCalendarDay(dateObject.getDate(), dayOfWeekAsString(dateObject.getDay())); dateObject.setDate(dateObject.getDate() + 1); while (dateObject.getDate() != 1) { createCalendarDay(dateObject.getDate(), dayOfWeekAsString(dateObject.getDay())); dateObject.setDate(dateObject.getDate() + 1); } // Set the text to the correct month var currentMonthText = document.getElementById("current-month"); currentMonthText.innerHTML = monthsAsString(date.getMonth()) + " " + date.getFullYear(); }
A little CSS to style the month calendar.
body { background-color: #f2f2f2; color: #888888; } .calendar-day { width: 8%; box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.1); background-color: #fff; font-size: 22px; line-height: 50%; padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px; margin: -1px; text-align: center; display: inline-block; } .controls { display: inline-block; text-align: center; cursor: pointer; }