JSFiddle - React, Tailwind, and code Playground

by velmurugansp

HTML

<div id="calendar"></div>

CSS

.date{
  border: solid 1px;
  text-align: center;
}

JavaScript

function displayDate(thisDate, thisMonth, thisYear, thisDay){
	console.log(thisDate, thisMonth, thisYear, thisDay);
  // get element with "calendar" as id value;
  let calendarEle = document.getElementById("calendar");
  
  // create a div
  let classEle = document.createElement("div");
  
  // add "date" as class name
  classEle.setAttribute("class", "date");
  
  // create a "h2" element
  let h2Ele = document.createElement("h2");
  
  // insert date-month-year inside h2 element
  h2Ele.innerText = thisDate +"-"+ thisMonth +"-"+ thisYear;
  
  // create a "p" element
  let pEle = document.createElement("p");
  
  // insert day inside p elment
  pEle.innerText = thisDay
  
  // insert h2 inside div.date
  classEle.append(h2Ele);
  
  // insert p inside div.date
  classEle.append(pEle);
  
 	// insert the div.date inside div#calendar
  calendarEle.append(classEle);
}


let dateObject = new Date(),
		months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
    days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ],
		date, month, year, day;

for(let i=0; i<30; i++){
  date = dateObject.getDate();

  month = dateObject.getMonth(); // 3
  month = months[month]; // "April"

  year = dateObject.getFullYear();

  day = dateObject.getDay(); // 0
  day = days[day]; // "Sunday"
  displayDate(date, month, year, day);

  dateObject.setDate(date+1);
}