Pleasanterカレンダーで国民の祝日と土日休みをカスタム

基本環境

Pleasanter 1.5.2.0

やりたいこと

国民の祝日をピンク背景
土日をグレー背景

内閣府HPから祝日データGET

テキストエディタで開く

2027年度分だとこんな感じ

2027/1/1,元日
2027/1/11,成人の日
2027/2/11,建国記念の日
2027/2/23,天皇誕生日
2027/3/21,春分の日
2027/3/22,休日
2027/4/29,昭和の日
2027/5/3,憲法記念日
2027/5/4,みどりの日
2027/5/5,こどもの日
2027/7/19,海の日
2027/8/11,山の日
2027/9/20,敬老の日
2027/9/23,秋分の日
2027/10/11,スポーツの日
2027/11/3,文化の日
2027/11/23,勤労感謝の日

CSS設定

背景色を変えるCSS

#CalendarBody #Grid tbody tr td[data-id="2027/1/1"]:not(.other-month){background-color:#ffc0cb !important;}

祝日タイトルを追加するCSS

#CalendarBody #Grid tbody tr td[data-id="2027/1/1"] div .day:after{content:"元日";margin-left:5px;}

スクリプト

$p.events.on_calendar_load = function () {

    // 国民の祝日（内閣府「国民の祝日.csv」より貼付け
    const data = `
        2026/1/1,元日
        2026/1/12,成人の日
        2026/2/11,建国記念の日
        2026/2/23,天皇誕生日
        2026/3/20,春分の日
        2026/4/29,昭和の日
        2026/5/3,憲法記念日
        2026/5/4,みどりの日
        2026/5/5,こどもの日
        2026/5/6,休日
        2026/7/20,海の日
        2026/8/11,山の日
        2026/9/21,敬老の日
        2026/9/22,休日
        2026/9/23,秋分の日
        2026/10/12,スポーツの日
        2026/11/3,文化の日
        2026/11/23,勤労感謝の日
        2027/1/1,元日
        2027/1/11,成人の日
        2027/2/11,建国記念の日
        2027/2/23,天皇誕生日
        2027/3/21,春分の日
        2027/3/22,休日
        2027/4/29,昭和の日
        2027/5/3,憲法記念日
        2027/5/4,みどりの日
        2027/5/5,こどもの日
        2027/7/19,海の日
        2027/8/11,山の日
        2027/9/20,敬老の日
        2027/9/23,秋分の日
        2027/10/11,スポーツの日
        2027/11/3,文化の日
        2027/11/23,勤労感謝の日
    `;

    const holidayCss = data
        .split('\n')
        .map(line => line.trim())
        .filter(line => line)
        .map(line => {
            const [date, name] = line.split(',');
            return [
                `#CalendarBody #Grid tbody tr td[data-id="${date}"]:not(.other-month){background-color:#ffc0cb !important;}`,
                `#CalendarBody #Grid tbody tr td[data-id="${date}"] div .day:after{content:"${name}";margin-left:5px;}`
            ].join('\n');
        })
        .join('\n');

    // 土日グレー背景
    const weekendCss = `

    #CalendarBody #Grid tbody tr td:nth-child(6):not(.other-month){background-color:#ddd;}
    #CalendarBody #Grid tbody tr td:nth-child(7):not(.other-month){background-color:#ddd;}`;

    const style = document.createElement('style');
    style.textContent = holidayCss + weekendCss;
    document.head.appendChild(style);

};

出力先：カレンダー

参考記事