0

Calendar using Vanilla JS

2 years ago

source link: https://dev.to/harshitanahta/calendar-using-vanilla-js-2g5m
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

neoserver,ios ssh client

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 modeExit 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 modeExit fullscreen mode

Set Top bar for calendar

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

Enter fullscreen modeExit 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 modeExit 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 modeExit 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 modeExit 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 modeExit 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 modeExit fullscreen mode

hope you understood and liked this little program
Happy Developing!

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

Recommend

About Joyk

Aggregate valuable and interesting links.
Joyk means Joy of geeK