こんにちは！
前回はJavaScriptでカレンダーを作成しました。
今回は、前回作成したカレンダーに祝日対応を組み込んでいきたいと思います！

前回の記事は下のリンクからどうぞ♪

【初心者向け】JavaScriptでカレンダー作成【サンプル】

JavaScript（JS）でカレンダーをライブラリなしで作り方を紹介。前月、次月を含めた1週間表示や日付の値を取得する方法をHTML,CSSソースやデモページ付きで解説！プログラミング初心者の方へ勉強や参考に！

nyanblog2222.com

2021.01.07

はじめに

祝日の対応ですが、今回はCSVファイルを読み込んで日付判定を行います。
CSVファイルは内閣府のWebサイトから取得できます。
※ 文字コードをShift-JISからUTF-8に変更しました。

直接ダウンロードされる場合はここをクリックしてください。

データは日付、祝日名の2項目で作成されています。

フロー（箇条書き）

箇条書きで処理フローを記述していきます。
CSVファイルの読み込みと当月の日付判定のそれぞれで変更を加えます。

CSVファイル読み込み

1. CSVファイルを読み込み
2. 読み込み完了後、カレンダー表示

当月の日付判定

1. その日付の情報を取得（本日か、祝日か等）
2. 条件に応じてカレンダー（HTML）を設定

HTML

<div class="wrapper">
    <!-- xxxx年xx月を表示 -->
    <h1 id="header"></h1>

    <!-- ボタンクリックで月移動 -->
    <div id="next-prev-button">
        <button id="prev" onclick="prev()">‹</button>
        <button id="next" onclick="next()">›</button>
    </div>

    <!-- カレンダー -->
    <div id="calendar"></div>
</div>

こちらの記事のHTMLと同じなので、解説は省略します♪

【初心者向け】JavaScriptでカレンダー作成【サンプル】

JavaScript（JS）でカレンダーをライブラリなしで作り方を紹介。前月、次月を含めた1週間表示や日付の値を取得する方法をHTML,CSSソースやデモページ付きで解説！プログラミング初心者の方へ勉強や参考に！

nyanblog2222.com

2021.01.07

CSS

前回の記事とほとんど変わりなしですが、
祝日のクラス（=holiday）に日曜日と同様のcolorスタイルの設定を追加しました。

td:first-child,
td.holiday{
    color: red;
}

JavaScript

コード

全体のコードです。
次項で解説しますが、前回の投稿で解説した内容は割愛いたします。

const week = ["日", "月", "火", "水", "木", "金", "土"];
const today = new Date();
// 月末だとずれる可能性があるため、1日固定で取得
var showDate = new Date(today.getFullYear(), today.getMonth(), 1);

// 祝日取得
var request;
window.onload = function () {
    request = new XMLHttpRequest();
    request.open('get', 'syukujitsu.csv', true);
    request.send(null);
    request.onload = function () {
        // 初期表示
        showProcess(today, calendar);
    };
};

// 前の月表示
function prev(){
    showDate.setMonth(showDate.getMonth() - 1);
    showProcess(showDate);
}

// 次の月表示
function next(){
    showDate.setMonth(showDate.getMonth() + 1);
    showProcess(showDate);
}

// カレンダー表示
function showProcess(date) {
    var year = date.getFullYear();
    var month = date.getMonth(); // 0始まり
    document.querySelector('#header').innerHTML = year + "年 " + (month + 1) + "月";

    var calendar = createProcess(year, month);
    document.querySelector('#calendar').innerHTML = calendar;
}

// カレンダー作成
function createProcess(year, month) {
    // 曜日
    var calendar = "<table><tr class='dayOfWeek'>";
    for (var i = 0; i < week.length; i++) {
        calendar += "<th>" + week[i] + "</th>";
    }
    calendar += "</tr>";

    var count = 0;
    var startDayOfWeek = new Date(year, month, 1).getDay();
    var endDate = new Date(year, month + 1, 0).getDate();
    var lastMonthEndDate = new Date(year, month, 0).getDate();
    var row = Math.ceil((startDayOfWeek + endDate) / week.length);

    // 1行ずつ設定
    for (var i = 0; i < row; i++) {
        calendar += "<tr>";
        // 1colum単位で設定
        for (var j = 0; j < week.length; j++) {
            if (i == 0 && j < startDayOfWeek) {
                // 1行目で1日まで先月の日付を設定
                calendar += "<td class='disabled'>" + (lastMonthEndDate - startDayOfWeek + j + 1) + "</td>";
            } else if (count >= endDate) {
                // 最終行で最終日以降、翌月の日付を設定
                count++;
                calendar += "<td class='disabled'>" + (count - endDate) + "</td>";
            } else {
                // 当月の日付を曜日に照らし合わせて設定
                count++;
                var dateInfo = checkDate(year, month, count);
                if(dateInfo.isToday){
                    calendar += "<td class='today'>" + count + "</td>";
                } else if(dateInfo.isHoliday) {
                    calendar += "<td class='holiday' title='" + dateInfo.holidayName + "'>" + count + "</td>";
                } else {
                    calendar += "<td>" + count + "</td>";
                }
            }
        }
        calendar += "</tr>";
    }
    return calendar;
}

// 日付チェック
function checkDate(year, month, day) {
    if(isToday(year, month, day)){
        return {
            isToday: true,
            isHoliday: false,
            holidayName: ""
        };
    }

    var checkHoliday = isHoliday(year, month, day);
    return {
        isToday: false,
        isHoliday: checkHoliday[0],
        holidayName: checkHoliday[1],
    };
}

// 当日かどうか
function isToday(year, month, day) {
    return (year == today.getFullYear()
        && month == (today.getMonth())
        && day == today.getDate());
    }

// 祝日かどうか
function isHoliday(year, month, day) {
    var checkDate = year + '/' + (month + 1) + '/' + day;
    var dateList = request.responseText.split('\n');
    // 1行目はヘッダーのため、初期値1で開始
    for (var i = 1; i < dateList.length; i++) {
        if (dateList[i].split(',')[0] === checkDate) {
            return [true, dateList[i].split(',')[1]];
        }
    }
    return [false, ""];
}

解説

・祝日データ（CSVファイル）取得

// 祝日取得
var request;
window.onload = function () {
    request = new XMLHttpRequest();
    request.open('get', 'syukujitsu.csv', true);
    request.send(null);
    request.onload = function () {
      // 初期表示
      showProcess(today, calendar);
    };
};

XMLHttpRequestオブジェクトを使用して、変数 request にCSVデータを格納しています。
1. request.open()関数でデータ取込のリクエストを行います。
2. request.send()関数でリスエストをサーバに送信します。
3. 7～10行目はロードが成功して完了後に呼ばれます。

つまり、CSVファイルの読み込みが完了した後にカレンダー表示の関数（showProcess）を呼び出しています。

・当月の日付を設定　コード：70～77行目

var dateInfo = checkDate(year, month, count);
if(dateInfo.isToday){
    calendar += "<td class='today'>" + count + "</td>";
} else if(dateInfo.isHoliday) {
    calendar += "<td class='holiday' title='" + dateInfo.holidayName + "'>" + count + "</td>";
} else {
    calendar += "<td>" + count + "</td>";
}

1行目：変数 dateInfoに日付チェックの戻り値を設定します。

2～8行目：dateInfoを使って条件に応じて日付を設定していきます。

・dateInfo.isTodayがtrueの場合、クラスtodayを付与して設定。
・dateInfo.isHolidayがtrueの場合、クラスholidayを付与、titleに祝日名を設定。
・上記以外の場合、日付をそのまま設定。

titleに祝日名を設定しているのは、祝日名をツールチップとして表示させるためです。
ツールチップ：カーソルやマウスポインタを合わせると小さな領域が注釈が表示されるもの。

・日付チェック　checkDate関数

引数：year（年）、month（月）、day（日）
戻り値：日付の情報
・当日かどうか（Bool）
・祝日かどうか（Bool）
・祝日名（文字列）

// 日付チェック
function checkDate(year, month, day) {
    if(isToday(year, month, day)){
        return {
            isToday: true,
            isHoliday: false,
            holidayName: ""
        };
    }

    var checkHoliday = isHoliday(year, month, day);
    return {
        isToday: false,
        isHoliday: checkHoliday[0],
        holidayName: checkHoliday[1],
    };
}

日付チェックの関数です。
条件に応じて戻り値のオブジェクトを作成しています。

・当日判定　isToday関数

引数：year（年）、month（月）、day（日）
戻り値：当日かどうか（Bool）

// 当日かどうか
function isToday(year, month, day) {
    return (year == today.getFullYear()
    && month == (today.getMonth())
    && day == today.getDate());
}

today（Date型）を使って、当日かどうかを判定します。

・祝日判定　isHoliday関数

引数：year（年）、month（月）、day（日）
戻り値：配列 [祝日かどうか（Bool）, 祝日名]

// 祝日かどうか
function isHoliday(year, month, day) {
    var checkDate = year + '/' + (month + 1) + '/' + day;
    var dateList = request.responseText.split('\n');
    // 1行目はヘッダーのため、初期値1で開始
    for (var i = 1; i < dateList.length; i++) {
        if (dateList[i].split(',')[0] === checkDate) {
            return [true, dateList[i].split(',')[1]];
        }
    }
    return [false, ""];
}

3行目：CSVデータの日付はYYYY/MM/DD形式のため、
引数で渡された年月日をYYYY/MM/DD形式で変数checkDateに設定。

4行目：変数dataListには、CSVデータを行毎に配列に格納。

6～10行目：CSVの行数分for文を回します。
ファイルの1行目はヘッダー行のため、初期値=1で設定。

7～9行目：
祝日：dateList[i].split(‘,’)[0]
祝日名：dateList[i].split(‘,’)[1]

祝日とcheckDateが一致する場合、戻り値を配列 [true, 祝日名]で設定して処理を完了。
どのデータとも一致しない場合は戻り値を配列 [false, 空文字]でセットして処理を完了。

デモ

こちらがデモページになります。
祝日の日付が赤くなっており、該当の日付にカーソルを合わせると祝日の名前が表示されます。

ただ、このCSVファイルはその年分までの日付しか入っていないため、
2024年以降の祝日には対応されていません。ご注意ください…。

最後に

いかがでしたでしょうか。
カレンダーを確認するときに祝日は分かっている方が見やすいですね♪

実装も簡単にできたのでお勧めです。

良ければ他の投稿もご覧ください！

投稿 【初心者向け】JavaScriptで祝日対応のカレンダー作成【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

こんにちは！
今回はJavaScriptでカレンダーを作成してみました。
カレンダー作成にはライブラリも存在しますが、勉学のために作成する方が多いかと思いますので今回は使用していません。自作すると、カスタマイズが容易であることもメリットですね！

本記事の続きでカレンダーに祝日も反映させました！

【初心者向け】JavaScriptで祝日対応のカレンダー作成【サンプル】

JavaScriptで祝日対応のカレンダーを作成しました。内容：内閣府のWebサイトから取得したCSVファイルを読み込んで日付判定を行い、祝日を赤字表示させツールチップに祝日名を表示する。var request = new XMLHttpRequest();...

nyanblog2222.com

2021.01.09

はじめに

まずはカレンダーに持たせる機能を決定します。
今回は以下の機能を持たせることにしました。

実際に作成したものですが、イメージ図はこちらです。

また、次以降の投稿で祝日、スケジュール入力の機能を追加したいと考えています。

フロー（箇条書き）

次に箇条書きで処理フローを記述します。

こちらで実際にコーディングを進めていきます。

HTML

まずはHTMLを作成していきます。
作成しているのは、以下の3つです。

<div class="wrapper">
    <!-- xxxx年xx月を表示 -->
    <h1 id="header"></h1>

    <!-- ボタンクリックで月移動 -->
    <div id="next-prev-button">
        <button id="prev" onclick="prev()">‹</button>
        <button id="next" onclick="next()">›</button>
    </div>

    <!-- カレンダー -->
    <div id="calendar"></div>
</div>

CSS

次にCSSでスタイルを決定します。
この辺りは好きなようにカスタマイズをしていただいて良いと思います！

ただ、JavaScriptで以下にクラスを設定しているので、ご注意ください。

先月、翌月の日付：disabled
当日：today

@charset "utf-8";

/*全体*/
.wrapper{
    max-width: 600px;
    margin: 0 auto;
    color: #666;
}
#header {
    text-align: center;
    font-size: 24px;
    width: 100%;
    margin: 1rem 0 0;
}

/*カレンダー*/
#calendar {
    text-align: center;
    width: 100%;
}
table {
    outline: 2px solid #ddd;
    border-collapse: collapse;
    width: 100%;
}
th {
    color: #000;
}
th, td {
    outline: 1px solid #ddd;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}
/*日曜日*/
td:first-child {
    color: red;
}
/*土曜日*/
td:last-child {
    color: blue;
}
/*前後月の日付*/
td.disabled {
    color: #ccc;
}
/*本日*/
td.today {
    background-color: #D65E72;
    color: #fff;
}

/*ボタン*/
#next-prev-button {
    position: relative;
}
#next-prev-button button{
    cursor: pointer;
    background: #B78D4A;
    color: #fff;
    border: 1px solid #B78D4A;
    border-radius: 4px;
    font-size: 1rem;
    padding: 0.5rem 2rem;
    margin: 1rem 0;
}
#next-prev-button button:hover{
    background-color: #D4BB92;
    border-color: #D4BB92;
}
#prev {
    float: left;
}
#next {
    float: right;
}

JavaScript

JavaScriptで実際にカレンダーを作成、表示していきます。

コード

次項で詳しく解説していますが、コメントでも多少記述しています。
コピペも可能です！

const week = ["日", "月", "火", "水", "木", "金", "土"];
const today = new Date();
// 月末だとずれる可能性があるため、1日固定で取得
var showDate = new Date(today.getFullYear(), today.getMonth(), 1);

// 初期表示
window.onload = function () {
    showProcess(today, calendar);
};
// 前の月表示
function prev(){
    showDate.setMonth(showDate.getMonth() - 1);
    showProcess(showDate);
}

// 次の月表示
function next(){
    showDate.setMonth(showDate.getMonth() + 1);
    showProcess(showDate);
}

// カレンダー表示
function showProcess(date) {
    var year = date.getFullYear();
    var month = date.getMonth();
    document.querySelector('#header').innerHTML = year + "年 " + (month + 1) + "月";

    var calendar = createProcess(year, month);
    document.querySelector('#calendar').innerHTML = calendar;
}

// カレンダー作成
function createProcess(year, month) {
    // 曜日
    var calendar = "<table><tr class='dayOfWeek'>";
    for (var i = 0; i < week.length; i++) {
        calendar += "<th>" + week[i] + "</th>";
    }
    calendar += "</tr>";

    var count = 0;
    var startDayOfWeek = new Date(year, month, 1).getDay();
    var endDate = new Date(year, month + 1, 0).getDate();
    var lastMonthEndDate = new Date(year, month, 0).getDate();
    var row = Math.ceil((startDayOfWeek + endDate) / week.length);

    // 1行ずつ設定
    for (var i = 0; i < row; i++) {
        calendar += "<tr>";
        // 1colum単位で設定
        for (var j = 0; j < week.length; j++) {
            if (i == 0 && j < startDayOfWeek) {
                // 1行目で1日まで先月の日付を設定
                calendar += "<td class='disabled'>" + (lastMonthEndDate - startDayOfWeek + j + 1) + "</td>";
            } else if (count >= endDate) {
                // 最終行で最終日以降、翌月の日付を設定
                count++;
                calendar += "<td class='disabled'>" + (count - endDate) + "</td>";
            } else {
                // 当月の日付を曜日に照らし合わせて設定
                count++;
                if(year == today.getFullYear()
                  && month == (today.getMonth())
                  && count == today.getDate()){
                    calendar += "<td class='today'>" + count + "</td>";
                } else {
                    calendar += "<td>" + count + "</td>";
                }
            }
        }
        calendar += "</tr>";
    }
    return calendar;
}

解説

先述したコードに対して細かく解説していきます！
結構長くなってしまったので、不要な方は飛ばしてください。

・グローバル変数の定義

const week = ["日", "月", "火", "水", "木", "金", "土"];

曜日を格納した配列を定義しています。
変更予定がないので、定数（const）で作成しています。

const today = new Date();
var showDate = new Date(today.getFullYear(), today.getMonth(), 1);

・本日の日付オブジェクトを定数で宣言
・表示する日付オブジェクトを宣言

表示する日付オブジェクトは初期化では”today”の年月＋1日固定で作成します。

Q：なぜ”today”をそのまま使用しないか
A：前の月、次の月表示で”getMonth()”に+-1を行っていますが、末日だと先々月、もしくは翌々日になることがあります。

・初期表示

window.onload = function () {
    showProcess(today, calendar);
};

当日の日付オブジェクトを使用して、showProcess関数を呼び出して初期表示を行います。

window.onload = function () {・・・};

↑はHTMLが読み込まれた直後に呼び出される関数です。

・prev()、next()関数

// 前の月表示
function prev(){
    showDate.setMonth(showDate.getMonth() - 1);
    showProcess(showDate);
}

// 次の月表示
function next(){
    showDate.setMonth(showDate.getMonth() + 1);
    showProcess(showDate);
}

「＜」クリックでprev()、「＞」クリックでnext()の関数がそれぞれ呼び出されます。

prev()関数の場合はshowDateオブジェクトに1月分減算後、
next()関数の場合はshowDateオブジェクトに1月分加算後にshowProcess関数を呼び出してカレンダーを表示します。

・カレンダー表示　showProcess関数

引数：date（表示するDateオブジェクト）

var year = date.getFullYear();
var month = date.getMonth();
document.querySelector('#header').innerHTML = year + "年 " + (month + 1) + "月";

ヘッダー（id=”#header”）に年月を表示させます。
getMonth()は0始まりのため、1月の場合、0が取得されます。
そのため、3行目では (month + 1) で月を設定します。

var calendar = createProcess(year, month);
document.querySelector('#calendar').innerHTML = calendar;

createProcess関数でカレンダーを作成し、id=”#calendar”にカレンダーを設定します。

・カレンダー作成　createProcess関数

引数：year（年）、month（月）
戻り値：作成したカレンダー

// 曜日
var calendar = "<table><tr class='dayOfWeek'>";
for (var i = 0; i < week.length; i++) {
    calendar += "<th>" + week[i] + "</th>";
}
calendar += "</tr>";

定数”week”を使用してカレンダー上部に表示させる、曜日を設定します。

var count = 0;
var startDayOfWeek = new Date(year, month, 1).getDay();
var endDate = new Date(year, month + 1, 0).getDate();
var lastMonthEndDate = new Date(year, month, 0).getDate();
var row = Math.ceil((startDayOfWeek + endDate) / week.length);

日付を設定するのに必要な変数を定義します。
それぞれの変数は以下の内容を定義しています。

count：日付のカウント
startDayOfWeek：表示する月の1日の曜日
endDate：表示する月の末日
lastMonthEndDate：表示する先月の末日
row：カレンダー（日付部分）の行数

// 1行ずつ設定
for (var i = 0; i < row; i++) {
    calendar += "<tr>";
    // 1colum単位で設定
    for (var j = 0; j < week.length; j++) {
        if (i == 0 && j < startDayOfWeek) {
            // 1行目で1日まで先月の日付を設定
            calendar += "<td class='disabled'>"
                     + (lastMonthEndDate - startDayOfWeek + j + 1) + "</td>";
        } else if (count >= endDate) {
            // 最終行で最終日以降、翌月の日付を設定
            count++;
            calendar += "<td class='disabled'>" + (count - endDate) + "</td>";
        } else {
            // 当月の日付を曜日に照らし合わせて設定
            count++;
            if(year == today.getFullYear()
              && month == (today.getMonth())
              && count == today.getDate()){
                calendar += "<td class='today'>" + count + "</td>";
            } else {
                calendar += "<td>" + count + "</td>";
            }
        }
    }
    calendar += "</tr>";
}

始めのfor文は行単位、2つ目のfor文はカラム（日付）単位で回します。

3行目、26行目ではtrタグで括っています。

6行目の条件は「1行目、かつ、1日の曜日未満」の場合に8、9行目の処理を行います。
その場合にクラス「disabled」を付与して日付を設定します。
計算式は例で実際に当てはめてみましょう。

例：2021/01
lastMonthEndDate = 31
startDayOfWeek = 5 （金曜日）
日曜日：31 – 5 + 0 + 1 = 27
月曜日：31 – 5 + 1 + 1 = 28

10行目の条件は当月の最終日以降、翌月の日付を設定します。
上記同様、クラス「disabled」を付与して日付を設定します。

それ以外の14行目～24行目の処理は当月の日付1日から末日まで入ります。
また、17行目～19行目の条件は本日の日付かどうかチェックしており、本日の場合はクラス「today」を付与しています。

デモ

こちらがデモページになります。
初期表示は当月で表示され、本日が赤く表示されていると思います。

また、＜＞のボタンをクリックすることで月の移動ができますので、お試しください♪

最後に

いかがでしたでしょうか。
ライブラリを使わなくても意外と簡単に実装ができました！

この後、カレンダーに祝日対応してみましたので、
良ければこちらの投稿もご覧ください！

【初心者向け】JavaScriptで祝日対応のカレンダー作成【サンプル】

JavaScriptで祝日対応のカレンダーを作成しました。内容：内閣府のWebサイトから取得したCSVファイルを読み込んで日付判定を行い、祝日を赤字表示させツールチップに祝日名を表示する。var request = new XMLHttpRequest();...

nyanblog2222.com

2021.01.09

【サンプル】JavaScriptのコードまとめリンク集

本記事では当ブログで上げているJavaScript記事のまとめリンク集になります。目次でカテゴリ分けをしているので、気になる内容がありましたら目次から飛んでみてください♪

nyanblog2222.com

2022.09.01

投稿 【初心者向け】JavaScriptでカレンダー作成【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。