How to create a Calendar with JavaScript

December 7, 2020

0 21,282 5 minutes read

How to create a Calendar with JavaScript

Before We Start

Every developer needs clean and modern elements to develop their websites, It contains pictures and a user interface element within a website. The most important one and the first section that the user sees when the user enters a website. How to create a Calendar with JavaScript

So if you are a person who wishes to develop a website, you have to know how to create that properly.

How to create a Calendar with JavaScript

We are here to solve your problem. In this article we discuss how to create these elements. Before we start please read the below articles which easier you to understand the process, if you are new to development.

Step 1 – Add HTML

It’s too easy and simple. Just copy and paste below code in your HTML editor between <body> </body> tag.

<div class="wrapper">
  <div id="calendar"></div>
  <div id="calendar_data"></div>
</div>

Step 2 – Add CSS

Copy and paste below code in your HTML editor between <style></style> tag.

<style>
*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
  background: #efefef;
}
/* for demo */
.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  height: 480px;
  background: #fff;
  margin: 1em auto;
  border: 4px solid #e2e2e2;
  box-shadow: 0 10px 9px -6px #c5c5c5;
  border-top-width: 25px;
  border-bottom-width: 32px;
  border-radius: 8px;
  overflow: hidden;
}
div#calendar {
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #f3f3f3;
}
table {
  width: 100%;
  font-family: sans-serif;
  border-collapse: separate;
  border-spacing: 0;
}
.head_cal {
  background: #fff;
  color: #85baff;
  font-size: 2rem;
  line-height: 5rem;
  text-transform: uppercase;
}
.subhead_cal {
  background: #85baff;
  color: #fff;
  font-size: 1.2rem;
  line-height: 2rem;
}
.week_cal {
  background: #fff;
  color: #d7d7d7;
  font-size: 1rem;
  line-height: 2rem;
}
.white_cal {
  background: #ececec !important;
}
tbody.days_cal tr td a {
  padding: 0;
  text-decoration: none;
  background: #fff;
  color: #888;
  height: 3.2rem;
  width: 100%;
  line-height: 3.2rem;
  display: block;
}
tbody.days_cal tr td {
  padding: 0;
  margin: 0;
  border: 1px solid #ececec;
  text-align: center;
  width: 14.28571428571429%;
  height: auto;
}
.event {
  color: #85baff !important;
  transition: all 0.3s ease;
}
.today_cal.event {
  background: #ff8d8d !important;
  color: #fff !important;
  transition: all 0.3s ease;
}
.today_cal.event:hover,
.event:hover {
  opacity: 0.5;
  transition: all 0.3s ease;
}
.week_event {
  color: #85baff;
}
#calendar_data {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #c5c5c5;
  opacity: 0;
  visibility: hidden;
  transform: scale(0, 0);
  transition: all 0.8s ease;
}

#calendar_data h3 {
  text-align: center;
  font-size: 20px;
  padding: 5px 10px;
  margin: 0;
  background: #f2f2f2;
  color: #43aeef;
  border-bottom: 1px solid #dfdfdf;
  text-transform: capitalize;
}
#calendar_data dl {
  padding: 0.5em;
  margin-left: 0;
  display: block;
  height: calc(100% - 4rem);
}
#calendar_data dt {
  float: left;
  clear: left;
  width: 5rem;
  text-align: left;
  font-size: 0.8rem;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
    Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  color: #43b0ef;
  background: #fff;
  padding: 0.2rem;
}
#calendar_data dd {
  margin: 0 0 1rem 5rem;
  padding: 0 0.5rem 0.5rem 0.5rem;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
    Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 0.8rem;
  line-height: 1.2rem;
  color: #adadad;
  border-bottom: 1px solid #eaeaea;
}
#calendar_data dd:last-child {
  border: none;
}

#calendar_data a:not(.hideEvent) {
  color: #43aeef;
  border: 0.1rem solid #43aeef;
  padding: 0.2rem 1rem;
  text-decoration: none;
}
.show_data {
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1, 1) !important;
  transition: all 0.2s ease;
}

.hideEvent {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 2rem;
  font-family: sans-serif;
  font-weight: 300;
  text-align: center;
  text-decoration: none;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  background: #f2f2f2;
  border-left: 0.1rem solid #e5e5e5;
  color: #d3d3d3 !important;
}
.hideEvent:hover {
  text-decoration: none;
  color: #f55;
}

</style>

Step 3 – Add JavaScript

And also copy and paste below JavaScript code between <script></script> tag.

<script>
// Start
_("#calendar").innerHTML = calendar();

// short queySelector
function _(s) {
  return document.querySelector(s);
}

// show info
function showInfo(event) {
  // link
  var url = "https://codepen.io/nakome/pen/EWBMzm.css";
  // get json
  getjson(url, function (obj) {
    for (var key in obj) {
      // if has envent add class
      if (_('[data-id="' + key + '"]')) {
        _('[data-id="' + key + '"]').classList.add("event");
      }
      if (event === key) {
        _("#calendar_data").classList.toggle("show_data");
        // template info
        var data =
          '<a href="#" class="hideEvent" ' +
          'onclick="return hideEvent();">&times;</a>' +
          "<h3>" +
          obj[key].type +
          "</h3>" +
          "<dl>" +
          "<dt><dfn>Title:</dfn></dt><dd>" +
          obj[key].title +
          "</dd>" +
          "<dt><dfn>Hour:</dfn></dt><dd>" +
          obj[key].time +
          "</dd>" +
          "<dt><dfn>Venue:</dfn></dt><dd>" +
          obj[key].venue +
          "</dd>" +
          "<dt><dfn>Location:</dfn></dt><dd>" +
          obj[key].location +
          "</dd>" +
          "<dt><dfn>Description:</dfn></dt><dd>" +
          obj[key].desc +
          "</dd>" +
          '<dt><dfn>More Info:</dfn></dt><dd><a href="' +
          obj[key].more +
          '" title="More info">Here</a></dd>' +
          "</dl>";

        return (_("#calendar_data").innerHTML = data);
      }
    }
  });
  return false;
}
// toggle event show or hide
function hideEvent() {
  _("#calendar_data").classList.toggle("show_data");
}

// simple calendar
function calendar() {
  // show info on init
  showInfo();

  // vars
  var day_of_week = new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"),
    month_of_year = new Array(
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December"
    ),
    Calendar = new Date(),
    year = Calendar.getYear(),
    month = Calendar.getMonth(),
    today = Calendar.getDate(),
    weekday = Calendar.getDay(),
    html = "";

  // start in 1 and this month
  Calendar.setDate(1);
  Calendar.setMonth(month);

  // template calendar
  html = "<table>";
  // head
  html += "<thead>";
  html +=
    '<tr class="head_cal"><th colspan="7">' +
    month_of_year[month] +
    "</th></tr>";
  html +=
    '<tr class="subhead_cal"><th colspan="7">' +
    Calendar.getFullYear() +
    "</th></tr>";
  html += '<tr class="week_cal">';
  for (index = 0; index < 7; index++) {
    if (weekday == index) {
      html += '<th class="week_event">' + day_of_week[index] + "</th>";
    } else {
      html += "<th>" + day_of_week[index] + "</th>";
    }
  }
  html += "</tr>";
  html += "</thead>";

  // body
  html += '<tbody class="days_cal">';
  html += "</tr>";

  // white zone
  for (index = 0; index < Calendar.getDay(); index++) {
    html += '<td class="white_cal"> </td>';
  }

  for (index = 0; index < 31; index++) {
    if (Calendar.getDate() > index) {
      week_day = Calendar.getDay();

      if (week_day === 0) {
        html += "</tr>";
      }
      if (week_day !== 7) {
        // this day
        var day = Calendar.getDate();
        var info =
          Calendar.getMonth() + 1 + "/" + day + "/" + Calendar.getFullYear();

        if (today === Calendar.getDate()) {
          html +=
            '<td><a class="today_cal" href="#" data-id="' +
            info +
            '" onclick="return showInfo(\'' +
            info +
            "')\">" +
            day +
            "</a></td>";

          showInfo(info);
        } else {
          html +=
            '<td><a href="#" data-id="' +
            info +
            '" onclick="return showInfo(\'' +
            info +
            "')\">" +
            day +
            "</a></td>";
        }
      }

      if (week_day == 7) {
        html += "</tr>";
      }
    }

    Calendar.setDate(Calendar.getDate() + 1);
  } // end for loop
  return html;
}

//   Get Json data
function getjson(url, callback) {
  var self = this,
    ajax = new XMLHttpRequest();
  ajax.open("GET", url, true);
  ajax.onreadystatechange = function () {
    if (ajax.readyState == 4) {
      if (ajax.status == 200) {
        var data = JSON.parse(ajax.responseText);
        return callback(data);
      } else {
        console.log(ajax.status);
      }
    }
  };
  ajax.send();
}

</script>

At the end we will have something like this. You can change fonts, colors, backgrounds and all things that you want. Enjoy it.

Your Output

Video Tutorial

Please watch this video to better understand this tutorial and don’t forget to subscribe to our channel.

Help others to find out about this article on Social Media sites. If you have any doubt or any problem, don’t hesitate to contact us. Thereafter we will be able to help you and also make sure you bookmark our site on your browser.

December 7, 2020

0 21,282 5 minutes read