$p.events.on_calendar_load

/**
 * ================================================================
 * サンプル  カレンダーに祝日・会社休日を色付きで表示する
 * ================================================================
 *
 * 【概要】
 *   設備予約などのテーブルでカレンダーを開いたとき、別サイト「祝日カレンダー」に
 *   登録した祝日・会社休日を $p.apiGet で取得し、該当する日のセルに色を付けて、
 *   名称をツールチップで表示します。
 *   $p.events.on_calendar_load は、カレンダーを開いたときだけでなく、前後の月への
 *   移動や月・週・日の表示切り替えのたびに発火し、そのたびにセルが描き直されます。
 *   そのため、発火のたびに表示中の期間の分だけ祝日を取得し直して色を付けます。
 *
 * 【前提】
 *   祝日カレンダーは、祝日を取り込むサンプル（upsert-holidays-from-api.js /
 *   upsert-holidays-from-api-client.js）で作成したテーブルを使います。
 *     ・DateA : 日付
 *     ・ClassA: 名称（例：文化の日、創立記念日）
 *     ・ClassB: 区分（国民の祝日／会社休日）。会社休日の色を分ける場合だけ追加
 *   カレンダーを見る人は、祝日カレンダーの閲覧権限が必要です。
 *   カレンダーの種類は既定の FullCalendar を前提にしています。
 *
 * 【スクリプトの出力先】
 *   「一覧」と「カレンダー」の両方にチェックしてください。
 *   一覧画面からビューの切り替えでカレンダーにした場合、画面は読み込み直されず、
 *   一覧画面で読み込んだスクリプトのまま動きます。出力先を「カレンダー」だけに
 *   すると、この操作では on_calendar_load が登録されず、祝日が表示されません。
 *
 * コード内の【 ... 】は適宜修正してください。
 * ================================================================
 */

// ===== 設定 =====
// 祝日カレンダーのサイトID
const HOLIDAY_SITE_ID = 【サイトID】;
// 祝日カレンダーの項目
const HOLIDAY_DATE_COLUMN = 'DateA'; // 日付
const HOLIDAY_NAME_COLUMN = 'ClassA'; // 名称
const HOLIDAY_KIND_COLUMN = 'ClassB'; // 区分（使わない場合は '' にする）
// 区分がこの値のときは会社休日の色にする
const COMPANY_HOLIDAY_KIND = '会社休日';
// セルの背景色
const HOLIDAY_COLOR = '#ffe4e4'; // 国民の祝日
const COMPANY_HOLIDAY_COLOR = '#e4ecff'; // 会社休日

// FullCalendar の日のセルには data-date="2026-10-01"（ハイフン区切り）が付く。
// 月表示では td、週表示では見出しの th に付くため、属性だけで両方を拾う。
const DAY_CELL_SELECTOR = '[data-date]';

// ===== 処理 =====
// 表示中のセルから、表示期間の最初と最後の日（yyyy-mm-dd）を求める。
// 月表示は前後の月の日（例：10/26〜12/6）も含むため、月からではなくセルから求める。
function getDisplayedRange() {
    const dates = $(DAY_CELL_SELECTOR)
        .map(function () {
            return String($(this).attr('data-date')).slice(0, 10);
        })
        .get()
        .sort();
    if (dates.length === 0) {
        return null;
    }
    return { from: dates[0], to: dates[dates.length - 1] };
}

// 該当する日のセルに色とツールチップを付ける
function markHoliday(holiday) {
    // API の日付は「2026/11/03」のスラッシュ区切りで返るため、セルの形式に合わせる
    const date = String(holiday[HOLIDAY_DATE_COLUMN]).slice(0, 10).replace(/\//g, '-');
    const name = holiday[HOLIDAY_NAME_COLUMN] || '';
    const isCompanyHoliday =
        HOLIDAY_KIND_COLUMN !== '' && holiday[HOLIDAY_KIND_COLUMN] === COMPANY_HOLIDAY_KIND;

    $(DAY_CELL_SELECTOR)
        .filter(function () {
            return String($(this).attr('data-date')).slice(0, 10) === date;
        })
        .css('background-color', isCompanyHoliday ? COMPANY_HOLIDAY_COLOR : HOLIDAY_COLOR)
        .attr('title', name);
}

// カレンダーを開いたとき、月の移動や表示形式の切り替えのたびに呼ばれる
$p.events.on_calendar_load = function () {
    const range = getDisplayedRange();
    if (!range) {
        return;
    }

    // 取得する項目（区分を使わない場合は除く）
    const columns = [HOLIDAY_DATE_COLUMN, HOLIDAY_NAME_COLUMN];
    if (HOLIDAY_KIND_COLUMN !== '') {
        columns.push(HOLIDAY_KIND_COLUMN);
    }

    $p.apiGet({
        id: HOLIDAY_SITE_ID,
        data: {
            View: {
                // 項目名をキーにした形式で受け取る（DateA は「2026/11/03」の文字列になる）。
                // この2つは View の中に書く（View の外に書くと既定の形式で返る）
                ApiDataType: 'KeyValues',
                ApiColumnKeyDisplayType: 'ColumnName',
                GridColumns: columns,
                // 日付の範囲は配列形式の文字列で、開始と終了をカンマで区切る
                ColumnFilterHash: {
                    [HOLIDAY_DATE_COLUMN]: JSON.stringify([
                        `${range.from.replace(/-/g, '/')},${range.to.replace(/-/g, '/')}`,
                    ]),
                },
            },
        },
        done: function (data) {
            try {
                (data.Response.Data || []).forEach(markHoliday);
            } catch (e) {
                // 表示に失敗してもカレンダー自体は止めない
                console.log(`祝日の表示に失敗しました: ${e}`);
            }
        },
        fail: function (data) {
            // 取得に失敗してもカレンダーの表示は止めず、コンソールに記録するだけにする
            console.log('祝日カレンダーの取得に失敗しました', data);
        },
    });
};