<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.6/themes/material_blue.min.css" />

<div class="bg-blue-100 h-screen flex items-start justify-center text-center p-4">
    <div class="mt-16 w-96 rounded-xl shadow-md p-5 border border-gray-50 bg-white">
        <h1 class="text-gray-700 text-lg">土日祝に色がついたflatpickr</h1>
        <div class="p-4">
            <input id="flatpickr" class="border border-gray-600 p-4 w-full" type="text" value="" placeholder="日付を選択して下さい" required />
        </div>
        <div class="w-full bg-gray-200 rounded-full h-1 mt-4">
            <div class="bg-blue-500 h-1 rounded-full"></div>
        </div>
        <p class="text-gray-500 text-xs mt-4">2023 Hajimecreate, inc.</p>
    </div>
</div>

.holiday {
    background-color: #ffe0e0 !important;

    &.selected {
        color: #393939 !important;
    }
}
.sunday {
    background-color: #ffe0e0 !important;

    &.selected {
        color: #393939 !important;
    }
}
.saturday {
    background-color: #c9dcff !important;

    &.selected {
        color: #393939 !important;
    }
}

///////////////////////////////////////////////////////////////////////////
// Y-m-d形式の日付文字列を返す関数
const format2YMD = (day) => {
    const Y = day.getFullYear();
    const M = day.getMonth() + 1;
    const D = day.getDate();
    return [Y, ("0" + M).slice(-2), ("0" + D).slice(-2)].join("-");
};

// 祝日判定用の関数の定義
const isHoliday = (date) => {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", "https://holidays-jp.github.io/api/v1/date.json", true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    const holidays = JSON.parse(xhr.responseText);
                    if (format2YMD(date) in holidays) {
                        resolve(true);
                    } else {
                        resolve(false);
                    }
                } else {
                    reject("データの取得に失敗しました");
                }
            }
        };
        xhr.send();
    });
};

// カレンダーの日付要素に土日祝クラスを付与する関数
const change_holiday_bg_color = (dObj, dStr, fp, dayElem) => {
    // 祝日クラス付与
    isHoliday(dayElem.dateObj)
        .then((result) => {
            if (result) {
                dayElem.classList.add("holiday");
            }
        })
        .catch((error) => {
            console.error(error);
        });

    // 土日クラス付与
    let dayOfWeek = dayElem.dateObj.getDay();
    switch (dayOfWeek) {
        case 0:
            dayElem.classList.add("sunday");
            break;
        case 6:
            dayElem.classList.add("saturday");
            break;
    }
};
///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////
// flatpickrの初期化
flatpickr("#flatpickr", {
    onDayCreate: change_holiday_bg_color
});
///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////
// カレンダーの日付が変更されたときの処理
const calendar = document.getElementById("flatpickr");

calendar.addEventListener("change", function () {
    const targetDay = new Date(this.value);

    // 祝日判定
    isHoliday(targetDay)
        .then((result) => {
            if (result) {
                alert("祝日です");
            } else {
                alert("祝日ではありません");
            }
        })
        .catch((error) => {
            console.error(error);
        });
});
///////////////////////////////////////////////////////////////////////////