JavaScript：カレンダー、トグルボタン方式【動作未確認】

【Copilotの答えの始め】

 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
 
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>カレンダー トグルボタン</title>
    <style>
        .calendar {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 10px;
        }
        .day {
            padding: 10px;
            border: 1px solid #ccc;
            text-align: center;
            cursor: pointer;
        }
        .day.selected {
            background-color: #4caf50;
            color: white;
        }
        .sunday {
            color: red;
        }
        .saturday {
            color: blue;
        }
        #selectedDates {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <form id="calendarForm" action="submit_page.php" method="post">
        <div class="calendar" id="calendar"></div>
        <button type="button" id="nextMonth">次の月</button>
        <input type="hidden" name="selectedDates" id="selectedDatesInput">
        <button type="submit">送信</button>
    </form>
    <div id="selectedDates"></div>

    <script>

 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
81
82
83
84
 
        document.addEventListener('DOMContentLoaded', function() {
            const calendar = document.getElementById('calendar');
            const selectedDatesDiv = document.getElementById('selectedDates');
            const selectedDatesInput = document.getElementById('selectedDatesInput');
            const monthDays = {
                1: 31,
                2: isLeapYear(new Date().getFullYear()) ? 29 : 28,
                3: 31,
                4: 30,
                5: 31,
                6: 30,
                7: 31,
                8: 31,
                9: 30,
                10: 31,
                11: 30,
                12: 31
            };
            let currentMonth = 1;
            const currentYear = new Date().getFullYear();
            const selectedDates = [];

            function isLeapYear(year) {
                return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
            }

            function generateCalendar() {
                calendar.innerHTML = ''; // クリア
                const firstDay = new Date(currentYear, currentMonth - 1, 1).getDay();

                // 空白を追加して1日が正しい曜日に来るようにする
                for (let i = 0; i < firstDay; i++) {
                    const blankElement = document.createElement('div');
                    blankElement.classList.add('day');
                    calendar.appendChild(blankElement);
                }

                for (let day = 1; day <= monthDays[currentMonth]; day++) {
                    const dayElement = document.createElement('div');
                    dayElement.classList.add('day');
                    const dayOfWeek = (firstDay + day - 1) % 7;
                    dayElement.textContent = day;

                    // 日曜日と土曜日の色を設定
                    if (dayOfWeek === 0) {
                        dayElement.classList.add('sunday');
                    } else if (dayOfWeek === 6) {
                        dayElement.classList.add('saturday');
                    }

                    dayElement.addEventListener('click', function() {
                        dayElement.classList.toggle('selected');
                        updateSelectedDates();
                    });
                    calendar.appendChild(dayElement);

                    // 週ごとに改行
                    if (dayOfWeek === 6) {
                        const brElement = document.createElement('div');
                        brElement.style.gridColumn = 'span 7';
                        calendar.appendChild(brElement);
                    }
                }
            }

            function updateSelectedDates() {
                const selectedElements = calendar.getElementsByClassName('selected');
                selectedDates.length = 0; // リセット
                for (const element of selectedElements) {
                    const day = element.textContent;
                    const date = `${currentYear}-${String(currentMonth).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
                    selectedDates.push(date);
                }
                selectedDatesInput.value = selectedDates.join(', ');
                selectedDatesDiv.textContent = '選択された日付: ' + selectedDates.join(', ');
            }

            generateCalendar();

            document.getElementById('nextMonth').addEventListener('click', function() {
                currentMonth = (currentMonth % 12) + 1;
                generateCalendar();
            });
        });

1
2
3
 
    </script>
</body>
</html>

 

【Copilotの答えの終わり】

 

 

 

 

冬の夜星は凛とし密度を増す