DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Calendar using Vanilla JS
Harshita Nahta
Harshita Nahta

Posted on

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" ]

Enter fullscreen mode Exit fullscreen mode

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
}
}

Enter fullscreen mode Exit fullscreen mode

Set Top bar for calendar

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

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()
}
Enter fullscreen mode Exit fullscreen mode

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);
   } 
}
Enter fullscreen mode Exit fullscreen mode

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))
  }
}
Enter fullscreen mode Exit fullscreen mode

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";
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

hope you understood and liked this little program
Happy Developing!

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

Top comments (1)

Collapse
 
womoboy profile image
Reza Heshmati

nice...👍👍👍

DEV has this feature:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠