“Comment faire un calendrier en utilisant HTML et CSS et JavaScript” Réponses codées

Comment faire un calendrier en utilisant HTML et CSS et 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>