HTML Code For Clock and Calendar

This HTML code snippet helps you to create a clock and calendar widget. It comes with a flippable card that consists of two faces. On the “front” face, there is a time widget with a square outer. On the “back” face, there is a calendar with two buttons labeled “Prev” and “Next” to navigate the dates.

How to Create Clock and Calendar Widget in HTML

First of all, load the Google fonts and Font Awesome CSS by adding the following assets into the head tag of your HTML document.

<link rel='stylesheet' href='//fonts.googleapis.com/css?family=Roboto+Slab:100,300,400'>
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>

Now, create the HTML structure for the clock and calendar as follows:

<div class="container">
  <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
      <div class="front">
        <div id="time-widget" class="outer-square setter time">
          <div id="do-time"></div>
        </div>
      </div>
      <div class="back">
        <div class="calendar-wrapper">
          <button id="btnPrev" type="button">Prev</button>
          <button id="btnNext" type="button">Next</button>
          <div id="divCal"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Now, style the clock and calendar widget using the following CSS styles:

html,
body {
  height: 100%;
}
body {
  font-size: 100%;
  line-height: 1.5;
  font-family: "Roboto Slab", sans-serif;
  background: #f2f2f2;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
.container {
  max-width: 400px;
  margin: 3em auto 0;
}
.flip-container {
  perspective: 1000;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
  transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
  width: 400px;
  height: 400px;
  border-radius: 3px;
}
.flipper {
  transition: 0.5s;
  transform-style: preserve-3d;
  position: relative;
}
.front,
.back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.front {
  z-index: 2;
  transform: rotateY(0deg);
  background: #28283b;
}
.back {
  transform: rotateY(180deg);
  background: #28283b;
}
/*CLOCK*/
.time * {
  text-align: center;
  text-transform: uppercase;
  color: #ffffff;
  font-family: "Roboto Slab", sans-serif;
}
#do-time {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.time h2 {
  font-size: 4em;
  font-weight: 400;
  line-height: 1;
}
.time h2 span {
  font-weight: 100;
}
.time h3 {
  font-size: 1.5em;
  font-weight: 100;
  line-height: 1;
  margin-top: 24px;
}
.time h3 span {
  font-weight: 400;
  display: block;
}
.time small {
  font-size: 1em;
  font-weight: 300;
}
/*END CLOCK*/
/*CALENDAR*/
.calendar-wrapper {
  font-family: "Roboto Slab", serif;
  font-weight: 100;
  padding: 2em;
}
tr.days {
  padding-top: 10px;
}
table {
  clear: both;
  width: 100%;
  color: #ffffff;
}
td {
  height: 36px;
  text-align: center;
  vertical-align: middle;
  width: 14.28571429%;
}
td.not-current {
  color: #8c8c8c;
}
td.today {
  color: #ffa500;
  font-size: 1.5em;
}
thead td {
  border: none;
  color: #ffa500;
  text-transform: uppercase;
  font-size: 1.5em;
}
#btnPrev {
  float: left;
  margin-bottom: 20px;
}
#btnPrev:before {
  content: '\f104';
  font-family: FontAwesome;
  padding-right: 4px;
}
#btnNext {
  float: right;
  margin-bottom: 20px;
}
#btnNext:after {
  content: '\f105';
  font-family: FontAwesome;
  padding-left: 4px;
}
#btnPrev,
#btnNext {
  background: transparent;
  border: none;
  outline: none;
  font-size: 1em;
  font-weight: 300;
  font-family: "Roboto Slab", serif;
  color: #8c8c8c;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.3s ease;
}
#btnPrev:hover,
#btnNext:hover {
  color: #ffa500;
}
/*END CALENDAR*/

Load the jQuery by adding the following CDN link before closing the body tag:

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Finally, add the following JavaScript function to activate the clock:

setInterval(function(){
  getId("do-time").innerHTML = formatTime();
},1000);

function formatTime() {

  var d = new Date(),
      minutes = d.getMinutes().toString().length == 1 ? '0'+d.getMinutes() : d.getMinutes(),
      hours = d.getHours().toString().length == 1 ? '0'+d.getHours() : d.getHours(),
      ampm = d.getHours() >= 12 ? 'pm' : 'am',
      months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

  return '<h2>'+hours+'<span>:'+minutes+'</span></h2><small>'+ampm+'</small><h3>'+days[d.getDay()]+'<span>'+months[d.getMonth()]+' '+d.getDate()+'</span>'+d.getFullYear()+'</h3>';
}

var Cal = function(divId) {

  this.divId = divId;

  this.DaysOfWeek = [ 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa' ];

  this.Months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ];

  var d = new Date();

  this.currMonth = d.getMonth();
  this.currYear = d.getFullYear();
  this.currDate = d.getDate();
  this.currD = d.getDay();

};

Cal.prototype.nextMonth = function() {
  if ( this.currMonth == 11 ) {
    this.currMonth = 0;
    this.currYear = this.currYear + 1;
  }
  else {
    this.currMonth = this.currMonth + 1;
  }
  this.showcurr();
};

Cal.prototype.previousMonth = function() {
  if ( this.currMonth == 0 ) {
    this.currMonth = 11;
    this.currYear = this.currYear - 1;
  }
  else {
    this.currMonth = this.currMonth - 1;
  }
  this.showcurr();
};

Cal.prototype.showcurr = function() {
  this.showMonth(this.currYear, this.currMonth);
};

Cal.prototype.showMonth = function(y, m) {

  var chk = new Date();
  var chkY = chk.getFullYear();
  var chkM = chk.getMonth();

  var d = new Date()
  , firstDayOfMonth = new Date(y, m, 1).getDay()
  , lastDateOfMonth =  new Date(y, m+1, 0).getDate()
  , lastDayOfLastMonth = m == 0 ? new Date(y-1, 11, 0).getDate() : new Date(y, m, 0).getDate();


  var html = '<table>';

  html += '<thead><tr>';
  html += '<td colspan="7">' + this.Months[m] + ' ' + y + '</td>';
  html += '</tr></thead>';


  html += '<tr class="days">';
  for(var i=0; i < this.DaysOfWeek.length;i++) {
    if ( chkY == this.currYear && chkM == this.currMonth && i == this.currD ) {
      html += '<td class="today">' + this.DaysOfWeek[i] + '</td>';
    } else {
      html += '<td>' + this.DaysOfWeek[i] + '</td>';
    }
  }
  html += '</tr>';

  var i=1;
  do {

    var dow = new Date(y, m, i).getDay();

    if ( dow == 0 ) {
      html += '<tr>';
    }
    else if ( i == 1 ) {
      html += '<tr>';
      var k = lastDayOfLastMonth - firstDayOfMonth+1;
      for(var j=0; j < firstDayOfMonth; j++) {
        html += '<td class="not-current">' + k + '</td>';
        k++;
      }
    }

    if (chkY == this.currYear && chkM == this.currMonth && i == this.currDate) {
      html += '<td class="today">' + i + '</td>';
    } else {
      html += '<td class="normal">' + i + '</td>';
    }
    if ( dow == 6 ) {
      html += '</tr>';
    }
    else if ( i == lastDateOfMonth ) {
      var k=1;
      for(dow; dow < 6; dow++) {
        html += '<td class="not-current">' + k + '</td>';
        k++;
      }
    }

    i++;
  }while(i <= lastDateOfMonth);

  html += '</table>';

  document.getElementById(this.divId).innerHTML = html;
};

window.onload = function() {

  var c = new Cal("divCal");			
  c.showcurr();

  getId('btnNext').onclick = function() {
    c.nextMonth();
  };
  getId('btnPrev').onclick = function() {
    c.previousMonth();
  };
}

function getId(id) {
  return document.getElementById(id);
}

That’s all! hopefully, you have successfully integrated this HTML code for the clock and calendar. If you have any questions or suggestions, feel free to comment below.