HTML

how to make a calendar using html and css and javascript

<div class="wrap">

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

  </div>
</div>
<script>
  _("#calendar").innerHTML = calendar();
let c = _("#calevent");
// short queySelector
function _(elm) {
  return document.querySelector(elm);
}
function start() {
  let days = [];
  return days;
}

function calendar() {
  let day_of_week = new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"),
    month_of_year = new Array(
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December"
    ),
    Calendar = new Date(),
    year = Calendar.getYear(),
    month = Calendar.getMonth(),
    today = Calendar.getDate(),
    weekday = Calendar.getDay(),
    html = "";
  days = day_of_week;
  // start in 1 and this month
  Calendar.setDate(1);
  Calendar.setMonth(month);
  function tblpart(t) {
    return document.createElement(t);
  }
  console.log(tblpart());
  // template calendar
  html = "<table>";
  // head
  html += "<thead>";
  html += `<tr class="head_cal"><th colspan="7"> 
    ${month_of_year[month]} 
    </th></tr>`;
  html += `<tr class="subhead_cal"><th colspan="7">
    ${Calendar.getFullYear()} 
    </th></tr>`;
  html += '<tr class="week_cal">';
  for (index = 0; index < 7; index++) {
    if (weekday == index) {
      days.push(day_of_week[index]);
      html += '<th class="week_event">' + day_of_week[index] + "</th>";
    } else {
      html += "<th>" + day_of_week[index] + "</th>";
    }
  }
  html += "</tr>";
  html += "</thead>";

  // body
  html += '<tbody class="days_cal">';
  html += "</tr>";
  // white zone
  for (index = 0; index < Calendar.getDay(); index++) {
    html += '<td class="white_cal"> </td>';
  }

  for (index = 0; index < 31; index++) {
    if (Calendar.getDate() > index) {
      week_day = Calendar.getDay();

      if (week_day === 0) {
        html += "</tr>";
      }
      if (week_day !== 7) {
        // this day
        let day = Calendar.getDate();
        let info =
          Calendar.getMonth() + 1 + "/" + day + "/" + Calendar.getFullYear();

        if (today === Calendar.getDate()) {
          html +=
            '<td><span class="span today_cal" href="#" data-id="' +
            info +
            '" onclick="showInfo('' +
            info +
            "')">" +
            day +
            "</span></td>";
        } else {
          html +=
            '<td><span class="span" href="#" data-day="' +
            day_of_week[week_day] +
            '" data-id="' +
            info +
            '" onclick="showInfo('' +
            info +
            "')">" +
            day +
            "</span></td>";
        }
      }
      if (week_day == 7) {
        html += "</tr>";
      }
    }
    Calendar.setDate(Calendar.getDate() + 1);
  } // end for loop
  return html;
}
function close(elm) {
  elm = event.target;
  console.log("elm", elm);
  c.classList.remove("cals");
  c.innerHTML = "";
  return c;
}
function showInfo() {
  console.log("hello");
  c.classList.add("cals");
  let Calendar = new Date();
  let cl = days[Calendar.getDay()];
  let reult = (c.innerHTML = " ");
  let data = event.target.dataset.id;
  let dy = event.target.dataset.day;
  let span = `<span>${dy}</span><div id="xx"> <h1>Days Events</h1><p><h3>On ${dy} <span>${data}</span></h3>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem placeat modi similique numquam odio, nemo eum ad, ducimus consectetur aperiam laborum, sint possimus totam? Perferendis magni facere nihil? Sed, possimus. Laborum odit ratione doloribus modi. Consequatur laboriosam libero magnam amet, aspernatur non labore itaque sint nam doloribus similique molestias veritatis unde repellendus repudiandae at repellat quam quos. Recusandae esse illo veniam rem asperiores, praesentium perferendis quod perspiciatis aut. Omnis voluptatibus dolor magni ullam i 
  </p> </div><br/>
  `;
  console.log(_("th"));
  c.innerHTML += span;
  c.addEventListener("click", close);
  return c;
}

</script>

html css calendar

//use divs and css styling to position them, eg:
//NOTE bootstrap is a better way to do this so I will update this example soon
<style>
	.month1{
      margin:10px;
    }
    
    .month2{
     margin:10px;
     transform: translate(50px; 0px); //translate moves an element by x and y directions
     								  //eg: transform: translate(x, y);
    }
</style>

<div class="month1">
	<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
  <tr>
    <td>Cell 7</td>
    <td>Cell 8</td>
    <td>Cell 9</td>
  </tr>
</table>

</div>

<div class="month2">
	<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
  <tr>
    <td>Cell 7</td>
    <td>Cell 8</td>
    <td>Cell 9</td>
  </tr>
</table>

</div>