Интерактивный календарь с JavaScript

Question

В настоящее время я работаю над своим школьным проектом, который представляет собой интерактивный календарь, и у меня возникла проблема.Мне нужно, чтобы мой календарь выделил ячейку в таблице, в зависимости от текущего дня.Например: завтра 17-е, поэтому я хочу, чтобы 17-я ячейка была выделена любым цветом.Мне нужно использовать только JavaScript и HTML, чтобы сделать это.У меня есть таблица с 31 тд селекторов, написанных на HTML.Мне было интересно что-то вроде этого: document.getElementsByTagName ("td") [Current_Day] .setAttribute ("background-color", "red");

Answer 1

По совпадению, я сделал нечто подобное несколько лет назад:

https://github.com/Subterrane/calendar

Этот пример кода не самый красивый (перенесенный из Typescript), но, по сути, вы правы.Найдите день, установите цвет.

"use strict";
document.addEventListener("DOMContentLoaded", function(event) {
  var calendars = document.getElementsByTagName('calendar');
  for (var ix = 0; ix < calendars.length; ix++) {
    var calendarEl = calendars[ix];
    var now = new Date();
    var y = parseInt(calendarEl.getAttribute('year')) || now.getFullYear();
    var m = parseInt(calendarEl.getAttribute('month')) || now.getMonth() + 1;
    var d = parseInt(calendarEl.getAttribute('day')) || now.getDate();
    var time = new Date(y, m - 1, d);
    var month = time.getMonth();
    var week = 1;
    var day = 1;
    var html = "<year number=\"" + y + "\"><month number=\"" + m + "\"><week number=\"" + week + "\">";
    time.setDate(day);
    do {
      if (time.getDay() % 7 === 0)
        html += "</week><week number=\"" + ++week + "\">";
      html += "<day number=\"" + day + "\"></day>";
      time.setDate(++day);
    } while (month === time.getMonth());
    html += '</week></month>';
    calendarEl.innerHTML = html;
    calendarEl.querySelector('day[number="' + d + '"]').classList.add('today');
  }
  var days = document.querySelectorAll('day');
  for (var ix = 0; ix < days.length; ix++) {
    days[ix].addEventListener('click', dayClicked);
  }
});

function dayClicked() {
  var el = this;
  var data = {
    year: el.parentElement.parentElement.parentElement.getAttribute('number'),
    month: el.parentElement.parentElement.getAttribute('number'),
    week: el.parentElement.getAttribute('number'),
    day: el.getAttribute('number')
  };
  var event = new CustomEvent('calendarClicked', {
    'detail': data
  });
  document.dispatchEvent(event);
}

calendar {
  display: block;
  margin-top: 20px;
  max-width: 600px;
  font-family: sans-serif;
}

week {
  display: flex;
}

week:first-child {
  justify-content: flex-end;
}

day {
  flex-basis: 14.3%;
  box-sizing: border-box;
  background-color: gainsboro;
  border: 1px solid white;
  padding: 2%;
  color: white;
  cursor: pointer;
  font-size: 4vw;
}

day::after {
  content: attr(number);
}

.today {
  background-color: gold;
}

<div class="container">
  <calendar></calendar>
</div>