How to create a vertical Calendar

December 6, 2020

0 300 5 minutes read

How to create a vertical Calendar

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 vertical Calendar

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 vertical Calendar

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 id="cal">
  <header>
    <h1 id="caltitle"></h1>
    <h1 id="time"></h1>
    <h2>
      <a id="prev" href=""></a>
      <a id="next" href=""></a>
    </h2>
  </header>

  <table>
    <tr>
      <td>
        <div class="day mo"></div>
        <div class="day">Su</div>
        <div class="day">Mo</div>
        <div class="day">Tu</div>
        <div class="day">We</div>
        <div class="day">Th</div>
        <div class="day">Fr</div>
        <div class="day">Sa</div>
        <div class="day">Su</div>
        <div class="day">Mo</div>
        <div class="day">Tu</div>
        <div class="day">We</div>
        <div class="day">Th</div>
        <div class="day">Fr</div>
        <div class="day">Sa</div>
        <div class="day">Su</div>
        <div class="day">Mo</div>
        <div class="day">Tu</div>
        <div class="day">We</div>
        <div class="day">Th</div>
        <div class="day">Fr</div>
        <div class="day">Sa</div>
        <div class="day">Su</div>
        <div class="day">Mo</div>
        <div class="day">Tu</div>
        <div class="day">We</div>
        <div class="day">Th</div>
        <div class="day">Fr</div>
        <div class="day">Sa</div>
        <div class="day">Su</div>
        <div class="day">Mo</div>
        <div class="day">Tu</div>
        <div class="day">We</div>
        <div class="day">Th</div>
        <div class="day">Fr</div>
        <div class="day">Sa</div>
        <div class="day">Su</div>
        <div class="day">Mo</div>
      </td>
      <td>
        <table id="months">
          <tr id="mtoprow">
            <td class="mc" valign="top"><span id="p0"></span></td>
            <td class="mc" valign="top"><span id="p1"></span></td>
            <td class="mc" valign="top"><span id="p2"></span></td>
            <td class="mc" valign="top"><span id="p3"></span></td>
            <td class="mc" valign="top"><span id="p4"></span></td>
            <td class="mc" valign="top"><span id="p5"></span></td>
            <td class="mc" valign="top"><span id="p6"></span></td>
            <td class="mc" valign="top"><span id="p7"></span></td>
            <td class="mc" valign="top"><span id="p8"></span></td>
            <td class="mc" valign="top"><span id="p9"></span></td>
            <td class="mc" valign="top"><span id="p10"></span></td>
            <td class="mc" valign="top"><span id="p11"></span></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

<div id="tmp">
  <span id="m0" style="display:none">
    <div class="months">
      <div class="mo">Month</div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
      <div class="dt"></div>
    </div>
  </span>
</div>

Step 2 – Add CSS

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

<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
body {
  font-family: Helvetica, Arial, sans-serif;
  background-color: #f7f7f9;
  color: #777;
  border-top: 5px solid #4d4d4d;
  font-size: 9pt;
}
a:link,
a:active,
a:visited {
  color: #777;
  text-decoration: none;
}
.dt,
.day,
.mo {
  text-align: right;
  width: 60px;
  height: 25px;
}
.day,
.mo {
  font-weight: bold;
  color: #555;
}
.day,
.dt {
  margin-bottom: 5px;
}
.mo {
  margin-bottom: 20px;
}
table,
td {
  border-spacing: 0;
  vertical-align: top;
}
h1 {
  display: inline-block;
  font-size: 4.5em;
  margin: 30px 0 0 40px;
}
h2 {
  margin: 0 0 30px 40px;
}

#cal {
  margin: 0 auto;
  width: 780px;
}
#time {
  float: right;
}

body.night {
  background-color: #111;
  color: #eee;
}
body.night h1 {
  color: #eee;
}
body.night .day,
body.night .mo {
  color: #aaa;
}

</style>

Step 3 – Add JavaScript

We use some external JavaScript link to this code. No need to worry about this, copy and paste below code between <head></head> tag.

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

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

<script>
var today = new Date();
var year = today.getUTCFullYear();
var month = today.getUTCMonth();
var day = today.getUTCDate();
var hour = today.getHours();
var minute = today.getMinutes();
var second = today.getSeconds();
var timeish = hour + "." + minute * 60;

var timeDiff = {
  setStartTime: function () {
    d = new Date();
    time = d.getTime();
  },

  getDiff: function () {
    d = new Date();
    return d.getTime() - time;
  }
};

var mtbl = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var mnames = new Array(
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec"
);

// End-of-month Julian Day lookup tables for normal and leap years
var jdtbln = new Array(0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334);
var jdtbll = new Array(0, 31, 60, 91, 121, 152, 182, 213, 244, 274, 305, 335);

var leap = false;
var jdtbl = jdtbln;
var yearpattern = /^\d{4,5}$/;
var displayStyle = "std";
var abtlinkhidden = true;

function isLeap(year) {
  return (year % 100 != 0 && year % 4 == 0) || year % 400 == 0;
}
function julianDay(day, month) {
  return day + jdtbl[month - 1];
}

// returns the day of week as an integer: 1=Sun, 2=Mon, ..., 7=Sat
function dayOfWeek(day, month, year) {
  leap = isLeap(year);
  jdtbl = leap ? jdtbll : jdtbln;
  var dow =
    (year +
      julianDay(day, month) +
      Math.floor((year - 1) / 4) -
      Math.floor((year - 1) / 100) +
      Math.floor((year - 1) / 400)) %
    7;
  return dow == 0 ? 7 : dow;
}

function renderMonth(parent, month, year) {
  var dateCells = $(parent + " div.dt");
  var cellid = dayOfWeek(1, month, year) - 1;
  var max = mtbl[month - 1];
  if (max == 28 && leap) max = 29;

  dateCells.eq(cellid++).html(1);
  for (var ix = 2; ix <= max; ix++) {
    dateCells.eq(cellid++).html(ix);
  }
  $(parent + " div.mo").html(mnames[month - 1]);
}

function getMonthSequence(mainMonth) {
  var tmp = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11);
  if (mainMonth == 0) return tmp;

  var monthseq = new Array();
  monthseq.push(mainMonth);
  if (mainMonth == 11) {
    // n+1 isn't possible
    monthseq.push(9);
    monthseq.push(10);
    tmp.splice(9, 3);
  } else {
    monthseq.push(mainMonth - 1);
    monthseq.push(mainMonth + 1);
    tmp.splice(mainMonth - 1, 3);
  }
  return monthseq.concat(tmp);
}

function getIdPrefix(ix) {
  return "#p";
}

function showSelective() {
  $("div#cal").show();
  $("p.prinvis").show();
  $("#mtoprow").show();
}

function renderCalendar(startMonth, stopMonth, year) {
  year = parseInt(year);

  timeDiff.setStartTime();
  var d = new Date();
  var seqargs = 0;
  var monthHtml = $("span#m0").html();
  var monthseq = getMonthSequence(seqargs);

  $("#caltitle").text(year);
  $("title").text(year);
  $("#prev")
    .attr("href", "#" + (year - 1))
    .text(year - 1);
  $("#next")
    .attr("href", "#" + (year + 1))
    .text(year + 1);

  for (var ix = startMonth - 1; ix < stopMonth; ix++) {
    var newId = getIdPrefix(ix) + ix;
    if ($(newId).length == 1) {
      $(newId).html(monthHtml);
      renderMonth(newId, monthseq[ix] + 1, year);
    }
  }

  showSelective();
}

// Clock

function convertToHHMM(info) {
  var hrs = parseInt(Number(info));
  var min = Math.round((Number(info) - hrs) * 60);
  return hrs + ":" + min;
}

function startTime() {
  var today = new Date();
  var hour = today.getHours();
  var minute = today.getMinutes();
  var second = today.getSeconds();

  if (hour > 12) {
    hour -= 12;
  } else if (hour === 0) {
    hour = 12;
  }

  minute = checkTime(minute);
  second = checkTime(second);
  $("#time").text(hour + ":" + minute + ":" + second);
  t = setTimeout(function () {
    startTime();
  }, 500);
}

function checkTime(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

$(window).on("hashchange", function () {
  if (window.location.hash) {
    var hash = window.location.hash.replace("#", "");
  }

  if (/^\d{4}$/.test(hash)) {
    renderCalendar(1, 12, hash);
  } else {
    renderCalendar(1, 12, year);
  }
});

// Lets get this shit started
$(document).ready(function () {
  if (window.location.hash) {
    var hash = window.location.hash.replace("#", "");
  }

  if (/^\d{4}$/.test(hash)) {
    renderCalendar(1, 12, hash);
  } else {
    renderCalendar(1, 12, new Date().getFullYear());
  }

  startTime();
});

</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 6, 2020

0 300 5 minutes read