Calendar using Vanilla JS

Hola!
In this busy world Having a calendar is often a handy feature to have.

There many calendar libraries out, components out there but
I tried to create a Calendar Using Vanilla JS, where I can move through the months. lets see how I have done.

var year = new Date().getFullYear();
var day = new Date().getDay()
var month = new Date().getMonth()
var date = new Date().getDate()

var weekdays = [ "sun" , "mon" , "tue", "wed", "thu" , "fri" , "sat" ]

var months = ["Jan" , "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul" , "Aug" , "Sept" , "Oct" ,"Nov" , "Dec" ]

we need a function which checks for leap year to set no of days in a month

var checkLeapYear = (setYear) =>{
  if( setYear%400 == 0){
    return true;
  }
  else if(setYear%100 == 0){
    return false;
  }
  else if(setYear%4 == 0){
    return true
  }
  else{
    return false
  }
}

var monthdays = (checkYear) => {
  return {
  "Jan" : 31,
  "Feb" : checkLeapYear(year) ? 29 : 28 , 
  "Mar" : 31,
  "Apr" : 30,
  "May" : 31,
  "Jun" : 30,
  "Jul" : 31,
  "Aug" : 31,
  "Sept" :30,
  "Oct" : 31,
  "Nov" : 30 , 
  "Dec" :31
}
}

Set Top bar for calendar

const setTopDate=(setMonth,setYear)=>{
  document.querySelector('[data-selected="full-date"]').innerHTML = months[setMonth] + " " + setYear;
}

set colspan for 1st row so that it should show empty column for the weekdays before 1st date of the month

const setFirstColspan = (monthdate) =>{
  var ele = document.getElementsByTagName("table")[0].rows[2]
   ele.innerHTML = ""
  if(monthdate>0){
  var data = document.createElement("td")
   ele.appendChild(data)
   ele.cells[0].setAttribute( "colspan", "" +(monthdate ))
  }
   setCalendarData(monthdate)
  setLastColspan()
}

finally set calendar data

const setCalendarData = (monthdate) => {
   var count = 1;
   for(var i = monthdate;i<=6;i++){
     var data = document.createElement("td")
     var text = document.createTextNode(count);
     count++;
     data.appendChild(text)
     document.getElementsByTagName("table")[0].rows[2].appendChild(data);
   }  
    var tempMonthDays  = monthdays(year)[months[month]]
    for(var i = count;i<=tempMonthDays;i+=7){
      row = document.createElement("tr");
      for(var j =0;j<7&&count<=tempMonthDays;j++){
        var data = document.createElement("td")
        var text = document.createTextNode(count);
        count++;
        data.appendChild(text)
        row.append(data)
      }
     document.getElementsByTagName("table")[0].appendChild(row);
   } 
}

now we also need to set colspan for last row empty columns

const setLastColspan = () => {
  var ele_len = document.getElementsByTagName("table")[0].rows
  var ele = document.getElementsByTagName("table")[0].rows[(ele_len.length)-1]
  if(7-(ele.cells.length) > 0){
  var data = document.createElement("td")
   ele.appendChild(data)
   ele.cells[ele.cells.length-1].setAttribute( "colspan", "" +(7-(ele.cells.length)+1))
  }
}

on change of month if user pressed on previous month the operation="prev" else if user want to move to next month the operation in that case is "next"

const changeMonth = (operation) =>{
  var ele =  document.getElementsByTagName("table")[0]
  var len =  Object.keys(ele.rows).length
  len--;
  while(len>2){
     ele.removeChild( document.getElementsByTagName("table")[0].rows[len])
     len--;
  }
  if(operation == "next"){
  if(month+1> 11){
    year = year+1
    month = 0
  }
  else {
    month = month+1
  }}
  if(operation == "prev"){
  if(month-1<0){
     year = year-1
     month = 11
   }
   else {
     month = month-1
   }
  }

  setTopDate(month,year);
  setFirstDay(year , month)
  count = 1;
  row = "undefined";
}

add some css to style the calendar

th,td{
  border: 2px solid black;
}
td,th{
  padding: 10px;
  text-align:center;
}
.actions{
  display : flex;
  justify-content : space-around;
  width : 300px;
  text-align : center;
  color : #ffffff;
  font-size: 25px;
  font-weight: 600;
  margin-top : 20px;
  cursor:pointer;
}
.actions-2{
  display : flex;
  justify-content : space-around;
  width : 300px;
  cursor: pointer;
}
.next-button{
   height: 30px;
   width: 30px;
   border-radius : 50%;
   background-color : #3d3d3d;
}
.prev-button{
   height: 30px;
   width: 30px;
   border-radius : 50%;
   background-color : #3d3d3d;
}

tr:first-child th {
  border-top-right-radius : 20px;
  border-top-left-radius : 20px;
  background-color : lightblue;
  border-color : transparent;
}
td:hover{
  background-color: offwhite;
   box-shadow: 0px 2px 3px 2px rgba(0,0,0,0.5); 
}
td[colspan]{
   box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2); 
}
tr th {
   box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2); 
  cursor: pointer; 
  border:transparent;
  background-color :lightgrey;
  color:#3d3d3d;
}
tr td{
  box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2); 
  cursor: pointer;
  border:transparent;
}

hope you understood and liked this little program
Happy Developing!

for reference :
codepen - https://codepen.io/harshita-nahta/pen/PoKpRVp

Blog

Calendar using Vanilla JS

Harshita Nahta

Join Our Newsletter. No Spam, Only the good stuff.

Related