В этой статье вы прочитаете как сделать календарь на чистом JavaScript, тут будет совсем не большая программа, и только основное.
Также можете прочитать статью: «Круглые часы на Canvas».
Делаем календарь на JavaScript:
Суть программы будет в том, что мы сделаем функцию которая смотрит какая сейчас дата и строит календарь месяца который сейчас идёт.
HTML:
В HTML просто нужно добавить блок для рендеринга.
1 | <div id="calendar"></div> |
То есть тут просто создали блок div, с идентификатором calendar.
CSS:
В CSS всё также очень просто, надо сделать так, чтобы вид был более менее.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px; text-align: center; } th { font-weight: bold; background-color: #E6E6E6; } |
Если вы хорошо знаете CSS, то для вас всё понятно, иначе, посмотрите наш учебник на эту тему.
JavaScript:
Теперь перейдём к самому главному, это коду на JavaScript, у нас будет две функции, первая главная, для создания календаря, вторая, берёт номер недели.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | function createCalendar(elem, year, month) { let mon = month - 1; // месяцы в JS идут от 0 до 11, а не от 1 до 12 let d = new Date(year, mon); let table = '<table><tr><th>пн</th><th>вт</th><th>ср</th><th>чт</th><th>пт</th><th>сб</th><th>вс</th></tr><tr>'; // пробелы для первого ряда // с понедельника до первого дня месяца // * * * 1 2 3 4 for (let i = 0; i < getDay(d); i++) { table += '<td></td>'; } // <td> ячейки календаря с датами while (d.getMonth() == mon) { table += '<td>' + d.getDate() + '</td>'; if (getDay(d) % 7 == 6) { // вс, последний день - перевод строки table += '</tr><tr>'; } d.setDate(d.getDate() + 1); } // добить таблицу пустыми ячейками, если нужно // 29 30 31 * * * * if (getDay(d) != 0) { for (let i = getDay(d); i < 7; i++) { table += '<td></td>'; } } // закрыть таблицу table += '</tr></table>'; elem.innerHTML = table; } |
Давайте не много разберём этот код, в начале мы получаем сегодняшней день, и перебразуем номер месяца в понятный для JS формат.
Все остальные действия дальше нужны только для рендеринга картинки, их особо нет смысла рассматривать, вы сами сможете это понять.
1 2 3 4 5 | function getDay(date) { // получить номер дня недели, от 0 (пн) до 6 (вс) let day = date.getDay(); if (day == 0) day = 7; // сделать воскресенье (0) последним днем return day - 1; } |
В этой функции берём день в неделе, можете заметить, что если нам попадается ноль, то мы присваиваем семь, это нужно для того, что бы менять строку в таблице.
Потом запускаем функцию createCalendar(), и вот что у нас получается.
На этом закончим теперь мы сделали календарь на HTML и JS, как вы видите, это очень простой код и показывает только один месяц, который проходит сейчас, но если его не много модернизировать, то может получится очень функциональное приложение.
Вывод:
В этой вы прочитали как сделать календарь на чистом JavaScript, думаю вам было просто, единственное стоит сказать, что этот код был взят с этой ссылки.
Подписываетесь на соц-сети:
Оценка:
Загрузка...