learnJavaScript/calendar.html at main · mikebars1995/learnJavaScript · GitHub

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE HTML>
<html>

<head>
    <style>
        table {
            border-collapse: collapse;
        }

        td,
        th {
            border: 1px solid black;
            padding: 3px;
            text-align: center;
        }

        th {
            font-weight: bold;
            background-color: #E6E6E6;
        }
    </style>
</head>

<body>


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

    <script>
        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;
        }

        function getDay(date) { // получить номер дня недели, от 0 (пн) до 6 (вс)
            let day = date.getDay();
            if (day == 0) day = 7; // сделать воскресенье (0) последним днем
            return day - 1;
        }

        createCalendar(calendar, 2017, 9);
    </script>

</body>

</html>