カレンダー

目標

今月のカレンダーをWebページに表示しよう

サンプルコード

1. HTMLのコードを、Glitchの index.html に追加しよう！

<h2>カレンダー</h2><div class="calendar">    <!-- ボタンクリックで月移動 -->    <div class="calendar-header">        <!-- (TRY)↓ このボタンを押したら「前の月に行く関数」を実行するようにしよう！ -->        <a id="prev-btn"></a>        <h2 id="calendar-title"></h2>        <!-- (TRY)↓ このボタンを押したら「次の月に行く関数」を実行するようにしよう！ -->        <a id="next-btn"></a>    </div>    <!-- カレンダー本体 -->    <div id="calendar-main"></div></div>

2. CSSのコードを、Glitchの style.css に追加しよう！

.calendar {    max-width: 600px;    text-align: center;    margin: 30px auto 0;    color: #666666;}
.calendar-header {    margin: 0 auto;    display: flex;    justify-content: center;    align-items: center;}
.calendar-header a {    background-color: transparent;    margin: 0 30px;    width: 30px;}
#next-btn {    width: 0;    height: 0;    border-style: solid;    border-width: 15px 0 15px 26px;    border-color: transparent transparent transparent #d4b361;}
#prev-btn {    width: 0;    height: 0;    border-style: solid;    border-width: 15px 26px 15px 0;    border-color: transparent #d4b361 transparent transparent;}
.calendar table {    margin: 0 auto;}
.calendar td {    /* tdにサイズを持たせることで、カレンダーの行数が変わってもサイズが固定 */    width: 30px;    height: 20px;}
.calendar td:first-child {    color: red;}
.calendar td:last-child {    color: royalblue;}
#calendar-main {    text-align: center;    width: 100%;}
.calendar td#today {    color: green;}

3. JavaScriptのコードを、Glitchの script.js に追加しよう！

const week = ["日", "月", "火", "水", "木", "金", "土"]const today = new Date()// (TRY!) yearには、「年」を取得して代入しようlet year = today.????()// (TRY!) monthには、「月」を取得して代入しようlet month = today.????() + 1
// カレンダー中身の作成function createCalendar(year, month) {    // 月の最初の日を取得    const firstDate = new Date(year, month - 1, 1)    // 月の最初の曜日    const firstDay = firstDate.getDay()    // 月の最後の日を取得    const lastDate = new Date(year, month, 0)    const lastDayCount = lastDate.getDate()    // 日にちのカウント    let dayCount = 1
    // タイトルの作成    const title = document.getElementById("calendar-title")    title.textContent = year + "/" + month
    // HTML要素を格納する変数    let calendarHtml = ""    calendarHtml += "<table>"
    // 曜日の行を作成    for (let i = 0; i < week.length; i++) {        calendarHtml += "<td>" + week[i] + "</td>"    }
    for (let w = 0; w < 6; w++) {        calendarHtml += "<tr>"
        for (let d = 0; d < 7; d++) {            if ((w == 0) & (d < firstDay)) {                // 一行目で、1日が始まる前の曜日                calendarHtml += "<td></td>" // 空白のマス            } else if (dayCount > lastDayCount) {                // 最後の行で、末日の後の曜日                calendarHtml += "<td></td>" // 空白のマス            }            // 追加分-------            else if (                dayCount === today.getDate() &&                month === today.getMonth() + 1            ) {                calendarHtml += `<td id="today">${dayCount}</td>`                dayCount++            } else {                calendarHtml += `<td>${dayCount}</td>`                dayCount++            }        }        calendarHtml += "</tr>"    }    calendarHtml += "</table>"
    document.getElementById("calendar-main").innerHTML = calendarHtml}
// ボタンの挙動// これが、「次の月に行く関数」function next() {    month++    if (month > 12) {        year++        month = 1    }    createCalendar(year, month)}
// これが、「前の月に行く関数」function prev() {    month--    if (month < 1) {        year--        month = 12    }    createCalendar(year, month)}
createCalendar(year, month)

4. (TRY!) と書いてある箇所を書き換えて、コードを完成させよう！

• Hacking-Timeで使った「時刻の取得方法」を参考にしよう！
• ボタンを押したときに、適切な関数が実行されるようにしよう！
• (今回のボタンは、class="btn"は不要です。ボタンの形が違うので)