Simple Responsive Month Calendar with JavaScript and CSS

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;
}