вернуться к уроку

Создайте календарь в виде таблицы

важность: 4

Напишите функцию createCalendar(elem, year, month).

Вызов функции должен создать календарь для заданного месяца month в году year и вставить его в elem.

Календарь должен быть таблицей, где неделя – это <tr>, а день – это <td>. У таблицы должен быть заголовок с названиями дней недели, каждый день – <th>, первым днём недели должен быть понедельник.

Например, createCalendar(cal, 2012, 9) сгенерирует в cal следующий календарь:

P.S. В этой задаче достаточно сгенерировать календарь, кликабельным его делать не нужно.

Открыть песочницу для задачи.

Для решения задачи сгенерируем таблицу в виде строки: "<table>...</table>", а затем присвоим в innerHTML.

Алгоритм:

  1. Создать заголовок таблицы с <th> и именами дней недели.
  2. Создать объект даты d = new Date(year, month-1). Это первый день месяца month (с учётом того, что месяцы в JS начинаются от 0, а не от 1).
  3. Ячейки первого ряда пустые от начала и до дня недели d.getDay(), с которого начинается месяц. Заполним <td></td>.
  4. Увеличить день в d: d.setDate(d.getDate()+1). Если d.getMonth() ещё не в следующем месяце, то добавим новую ячейку <td> в календарь. Если это воскресенье, то добавим новую строку «</tr><tr>».
  5. Если месяц закончился, но строка таблицы ещё не заполнена, добавим в неё пустые <td>, чтобы сделать в календаре красивые пустые квадратики.

Открыть решение в песочнице.