Pleasanter人員シフトカレンダーに注釈を追加するテーブル

基本環境

Pleasanter 1.5.2.0

やりたいこと

シフトを組む際に必要なその日の状況を、日付の横にコメントを追加する
（休み：休みの人員名前）
（その他：その他スケジュール）

カレンダー入力テーブルを作成

期限付きテーブルで新規テーブルを作成
項目：項目名
完了：登録日付
説明A：休み
説明B：その他

タイトル：タイトル（休み、その他を同期）

データを登録

カレンダー表示で管理できる

本テーブルにスクリプト

$p.events.on_calendar_load = function () {

    $p.apiGet({
        id: [カレンダー入力テーブルのサイトID],
        done: function(data) {

            const DayoffCss = data.Response.Data.map(row => {
                // 日付を "YYYY/MM/DD" 形式に変換
                const raw = new Date(row.CompletionTime);
                const date = `${raw.getFullYear()}/${raw.getMonth() + 1}/${raw.getDate()}`;

                const dayoff = row.DescriptionHash.DescriptionA || 'なし';
                const other  = row.DescriptionHash.DescriptionB || 'なし';

                // 表示テキスト組み立て
                const parts = [];
                if (dayoff) parts.push(`休み：${dayoff}`);
                if (other)  parts.push(`その他：${other}`);
                const label = `（${parts.join('、')}）`;

                return `#CalendarBody #Grid tbody tr td[data-id="${date}"] div .day:after{content:"${label}";margin-left:5px;}`;
            }).join('\n');

            const style = document.createElement('style');
            style.textContent = DayoffCss;
            document.head.appendChild(style);
        },
        fail: function(err) { console.log("error"); }
    });

};

CSS

/* カレンダーセル内テキスト */
.CalendarBody td>div {
    max-width: 300px;
}

#CalendarBody td .day, .grid-stack-item
.CalendarBody td .day {
    width: 100%;
    font-weight: bold;
    color: #0056b7;
}
.day::after {
    width: 100%;
    font-weight: normal;
    color: #000;
}

#CalendarBody td.today .day, .grid-stack-item
.CalendarBody td.today .day {
    color: #000;
    background-color: #ffbc11;
}

参考記事