Calendar

by kpulkit29

HTML

<table cellspacing="0">
    <tr>
      <td>Sun</td>
      <td>Mon</td>
      <td>Tue</td>
      <td>Wed</td>
      <td>Thurs</td>
      <td>Fri</td>
      <td>Sat</td>
    </tr>
    <tr></tr>
</table>

CSS

td {
  width: 25px;
  height: 25px;
  border: 1px solid black;
  padding: 10px;
}

.current-date {
  color: blue;
  background: green;
}

JavaScript

function getTotalDays(month) {
   return (new Date(2023, month, 0)).getDate();
}

function getCurrMonth(month) {
   return (new Date()).getMonth()+1;
}

function getStartDay(month) {
  let monthStr = month<10 ? "0"+month : month;
	return new Date(2023 + "-" + monthStr + "-01").getDay();
}

function lastVacants(start, total) {
	let count = start;
  while(count+7<=total) {
  	count+=7;
  }
  let diff = total - count;
  if(diff == 0) return diff;
  return (start+diff)%7;
}


function buildCalender() {
		let calender = document.getElementsByTagName("table")[0];
    let month = getCurrMonth();
    let total = getTotalDays(month);
    let start = getStartDay(month);
    let currDate = (new Date()).getDate();
		let last =- lastVacants;
    let dates = [];
    let emptyLength = start === 0 ? 0 : start;
    for(let i=0;i<emptyLength;i++) {
    	dates.push("");
    }
    for(let i=1;i<=total;i++) {
    	dates.push(i);
    }
    
     for(let i=0;i<last;i++) {
    	dates.push("");
    }
    
    let count = 0;
    let tr;
    for(let i=0;i<dates.length;i++) {
    	if(count%7==0) {
      	tr = document.createElement("tr");
      	calender.appendChild(tr);
      } 
      let td = document.createElement("td");
      td.innerText = dates[i];
      if(dates[i] === currDate) {
      	td.classList.add('current-date');
      }
      tr.append(td);
      count++;
    }
}
buildCalender();