JavaScript Outlook Calendar

This JavaScript code snippet helps you to create an outlook calendar. It creates a dynamic calendar using JavaScript and defines arrays for the month names and days of the week, gets the current date, and then creates a calendar for each month using a for loop. The createCalendar() function is called to create each month’s calendar, which consists of a header with the month name and days of the week, and a grid of days. The days of the month are created using the created () function and added to the grid. The daysInMonth() function is used to calculate the number of days in each month, and the getFirstDayOfTheMonth() function is used to get the first day of the month.

Finally, the code includes an event listener that allows users to click on a month to see a popup of that month’s calendar.

How to Create JavaScript Outlook Calendar

Create the HTML structure for the outlook calendar as follows:

<section class= "black">  
<h1 id="year"></h1>
<div class="calendar"></div>
</section>

Now, style the outlook calendar using the following CSS styles:

html { 
  font-size: 80%;
  background:black;  
}
 
* {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Times, serif;
}

.calendar, 
section {
  max-width: 50rem;
}
.black{
background-color: black;
}
.day { 
  width: 2em;
  height: 2em;
  color:#fff;
}

.day:nth-of-type(7n+1) {
  color: #f09;
}

.to.day {
  color: #07a;
  font-weight:bold;
  background: none;
  border-radius: 50%;
  box-shadow:0px 0px 2px black;
}
  .cd__main{
display: block !important;
}
.month { 
  width: calc(2em * 7);
  padding: 1em;  
  cursor: pointer; 
}

h4 { 
  font-size: 1em;
  text-transform: capitalize;
  color: darkgoldenrod;
}
 
h1#year { 
  font-size: 2em;
  height: 29px;
  font-weight: normal;
  font-family:Segoe UI, Fertigo Pro, Open Sans;
  padding: 1em 1em .5em 1em;
  margin-bottom: .5em;
  border-bottom: 5px double #492191;
  text-shadow:0px 2px 1px black, 0px 2px 1px black, 0px 2px 1px black, 4px 2px 1px orange;
  color:white;

}
 
.no-flexbox .day {
  text-align: center;
  float: left; 
  line-height: 1.5em;
}

.no-flexbox h4 { 
  text-align: center;
}

.no-flexbox h1 {
  width: 4em; 
}


/* FLEXBOX styles*/

body,
body * {
  display: flex;
  justify-content: center;
}

h4 {
  justify-content: center;
  flex: 1 0 100%;
}

h1 {
  justify-content: center;
  align-self: stretch;
}

.calendar,
.month {
  flex-wrap: wrap;
  padding:2.5em;
}

section {
  flex-direction: column;
  align-self: center;
}

.month {
  align-items: flex-start;
}

.day {
  align-items: center;
  justify-content: center;
}


/*for a Spanish like calendar  
  .month .day:nth-of-type(1){order:7!important;}
  .month .day:nth-of-type(8){order:-1!important;}
   
*/

script {
  display: none;
}

.cloneCont {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -5em;
  margin-top: -10.89em;
  box-shadow: 0px 0px 5px 1px #ccc;
  transform: scale(2, 2);
  background: rgba(0, 0, 0, .9);
  animation: redimensionar .5s cubic-bezier(.86, 0, .07, 1);
}

.month.cloneMonth {
  display: flex
}

.month.cloneMonth:after {
  content: "\02718";
  color: #f09;
  position: absolute;
  top: 1em;
  right: 1em;
}

.cloneCont.trans> {
  transform: translateY(1000px);
  background: rgba(0, 0, 0, .9);
  opacity: 0;
  animation: trasladar .5s cubic-bezier(.86, 0, .07, 1);
}

/*********************SPECIAL DAYS*********************/
/*   July 4th         */
.calendar>div:nth-of-type(7)>div[style="order:22"]{
	font-weight:bold;
	color: #00f;
	text-align:center;
 }

/*   September 5th         */
.calendar>div:nth-of-type(9)>div[style="order:22"]{
	font-weight:bold;
	color: #65557d;
	text-align:center;
 }

/*   October 31st     */
.calendar>div:nth-of-type(10)>div[style="order:50"]{
	font-weight:bold;
	color: #ffa500;
	text-align:center;
 }

/*   November 25th   */
.calendar>div:nth-of-type(11)>div[style="order:40"]{
	font-weight:bold;
	color: #a61;
	text-align:center;
 }

/*   December 24th   */
.calendar>div:nth-of-type(12)>div[style="order:41"]{
	font-weight:bold;
	color: #0a0;
	text-align:center;
 }

/*   December 25th   */
.calendar>div:nth-of-type(12)>div[style="order:42"]{
	font-weight:bold;
	color: #0a0;
	text-align:center;
 }

/*   December 31st   */
.calendar>div:nth-of-type(12)>div[style="order:47"]{
	font-weight:bold;
	color: tan;
	text-align:center;
 }

/*   January 1st   */
.calendar>div:nth-of-type(1)>div[style="order:20"]{
	font-weight:bold;
	color: #80794f;
	text-align:center;
 }

/*   February 14th   */
.calendar>div:nth-of-type(2)>div[style="order:29"],
  
  /* ADDED */

.cloneCont>div.M2>div[style="order:29"] {
  font-weight: bold;
  color: #6710c9;
  text-align: center;
}
  
/*  March 17th   */
.calendar>div:nth-of-type(3)>div[style="order:32"]{
	font-weight:bold;
	color: #0a0;
	text-align:center;
 }

/*  April 4th  */
.calendar>div:nth-of-type(4)>div[style="order:21"]{
	font-weight:bold;
	color: yellow;
	text-align:center;
 }

/*   May 30th   */
.calendar>div:nth-of-type(5)>div[style="order:43"]{
	font-weight:bold;
	color: #5d839c;
	text-align:center;
 }

/*   June 19th   */
.calendar>div:nth-of-type(6)>div[style="order:35"]{
	font-weight:bold;
	color: #f2c035;
	text-align:center;
 }
/*********************SPECIAL DAYS*********************/

@keyframes redimensionar {
  0% {
    transform: scale(1, 1);
    background: rgba(0, 0, 0, .9);
    opacity: 0;
  }
  100% {
    transform: scale(2, 2);
    background: rgba(0, 0, 0, .9);
    opacity: 1;
  }
}

@keyframes trasladar {
  0% {
    opacity: 1;
  }
  100% {
    transform: translateY(1000px);
    opacity: 0;
  }
}

Finally, add the following JavaScript function for its functionality:

var monthNamesRy = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var daysOfTheWeekRy = ["S", "M", "T", "W", "T", "F", "S"]

var d = new Date();
var year = d.getFullYear(); // 2016
document.querySelector("#year").innerHTML = year;
var thisMonth = d.getMonth(); // 0 - 11
var today = d.getDate(); // 1 -31
//var nthday = d.getDay();// 0 - 7
var daysOfTheMonthDiv = document.querySelectorAll(".daysOfTheMonth");


for (var month = 0; month < 12; month++) {
  createCalendar(month);
}



function createCalendar(month) {
  var monthDiv = createMonthHeader(month);

  //ADD class which tells us which month number it is
  monthDiv.classList.add('M' + Number(month + 1));

  var firstDayOfTheMonth = getFirstDayOfTheMonth(year, month);
  var daysinmonth = daysInMonth(year, month)
  var counter = 0,
    order = 6;

  for (var i = 0; i < firstDayOfTheMonth + 7; i++) {
    order++;
    createDay(month, "&nbsp;", order, monthDiv);
  }
  for (var i = firstDayOfTheMonth; i < daysInMonth(year, month) + firstDayOfTheMonth; i++) {
    counter++;
    order++;
    createDay(month, counter, order, monthDiv);
  }

  for (var i = firstDayOfTheMonth + daysinmonth; i < 6 * 7; i++) {
    order++;
    createDay(month, "&nbsp;", order, monthDiv);
  }


}

function createDay(month, counter, order, monthDiv) {

  //if(order == 8){order = -1}
  var day = document.createElement("div");
  if (month == thisMonth && counter == today) {
    day.setAttribute("class", "to day");
  } else {
    day.setAttribute("class", "day");
  }
  day.setAttribute("style", "order:" + order);
  day.innerHTML = counter;
  monthDiv.appendChild(day);

}


function createMonthHeader(month) {
  var calendar = document.querySelector(".calendar");



  var monthDiv = document.createElement("div");
  monthDiv.setAttribute("class", "month");
  calendar.appendChild(monthDiv);

  var h4 = document.createElement("h4");
  h4.innerHTML = monthNamesRy[month];
  monthDiv.appendChild(h4);

  for (var i = 0; i < 7; i++) {
    //var order = (i == 0) ? order = 7 : order = i;
    var hday = document.createElement("div");
    hday.setAttribute("class", "day OfWeek");
    hday.setAttribute("style", "order:" + i);
    hday.innerHTML = daysOfTheWeekRy[i].toUpperCase();
    monthDiv.appendChild(hday);
  }


  return monthDiv;

  /*
  <div class="month">
    
  <div class="monthHeader">
  <div class="day OfWeek">Sun</div>
  <div class="day OfWeek">Mon</div>
  <div class="day OfWeek">Tue</div>
  <div class="day OfWeek">Wed</div>
  <div class="day OfWeek">Thu</div>
  <div class="day OfWeek">Fri</div>
  <div class="day OfWeek">Sat</div>
  </div>
        
  <div class="daysOfTheMonth">
  */
}


function daysInMonth(year, month) {
  return new Date(year, month + 1, 0).getDate(); //29/03/2016 (month + 1)
}

/*function leapYear(year){
  return ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
}

function getNextMonth(month){
 if (month == 11) {
    var nextMonth = 0;
} else {
    var nextMonth = month+1;
}
return nextMonth;
}
*/
function getMonthName(month) {
  return monthNamesRy[month];
}

function getDayName(day) {
  return daysOfTheWeekRy[day];
}

function getFirstDayOfTheMonth(y, m) {
  var firstDay = new Date(y, m, 1);
  return firstDay.getDay();
}

function getLastDayOfTheMonth(y, m) {
  var lastDay = new Date(y, m + 1, 0);
  return lastDay.getDay();
}


// the popp up

var calendar = document.querySelector(".calendar");
var cloneCont = document.querySelector(".cloneCont");
var requestId = false;
calendar.addEventListener("click", function(e) {
  if (this.querySelector(".cloneCont")) {
    this.removeChild(this.querySelector(".cloneCont"));
  } else if (e.target.parentNode.className.includes('month M')) {

    var monthClone = e.target.parentNode.cloneNode(true);
    monthClone.className += " cloneMonth";
    var cloneCont = document.createElement("div");
    cloneCont.className += " cloneCont";
    cloneCont.appendChild(monthClone);
    this.appendChild(cloneCont);

  }
}, false);

That’s all! hopefully, you have successfully created the JavaScript outlook calendar. If you have any questions or suggestions, feel free to comment below.