日付フィールドで指定した日付をカレンダーに入れて土日と指定した日付に色をつけたいです。
【フロー】
・日付フィールドに"休業日"という名前をつけ、レコードを作成。
・"休業日"を参照して一覧のカレンダー形式へ入れる
・カレンダーでは土日と"休業日"に色がつく
以下のコードでは、土日だけ色が付きました。
この色付き方を目指してます。
ご協力をお願いします。
(function() {
“use strict”;
// レコード一覧画面が表示された後に発生するイベント
kintone.events.on(“app.record.index.show”, async function(e) {
// カレンダー表示機能以外は祝日表示の対応をしない
if(e.viewType != “calendar”) {
return e;
};
// 土曜日を強調表示する
document.querySelectorAll(".calendar-cell-gaia.sat-calendar-gaia,.calendar-weekday-sat-gaia").forEach(el=>{
el.style.backgroundColor = "#eff9ff"
el.style.color = "#bedeef";
});
// 日曜日を強調表示する
document.querySelectorAll(".calendar-cell-gaia.sun-calendar-gaia,.calendar-weekday-sun-gaia").forEach(el=>{
el.style.backgroundColor = "#fff0ea";
el.style.color = "#ef8a63";
});
// 祝日に名称追加と強調表示する
const records= e.records;
const holidayDates = records.map(record => record.休業日.value);
document.querySelectorAll(".calendar-cell-gaia").forEach(el=>{
var d = el.id.match(/\d{4}-\d{2}-\d{2}/)[0];
if(holidayDates.includes(d)){
// 祝日を強調表示にする
el.style.backgroundColor = "#fff0ea";
el.style.color = "#ef8a63";
}
});
return e;
});
})();