🗂
Pleasanterの施設予約でカレンダーViewを色分けする

2024/10/07に公開
 概要Pleasanter のテンプレートを利用して、「会議室利用申請」作成して会議室の管理ページを作った時、カレンダー View にすると全て同じ色で分かりずらいを解決します。
今回のカレンダータイプは、FullCalendar です。

 手順前提として、テンプレートを利用して、「会議室利用申請」テーブルを作成したところから説明します。
「エディタ」>「タイトル」>「詳細設定」で、施設が初めに表示されるようにする
「スクリプト」に次のコードを追加する
$p.events.on_calendar_load = function () {
  // 会議室の色設定
  const roomColors = {
    大会議室: "purple",
    小会議室１: "crimson",
    小会議室２: "darkblue",
    "打ち合わせスペース（手前）": "maroon",
    "打ち合わせスペース（奥）": "pink",
  };

  const days = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"]; // 曜日リスト

  // 要素に色を設定する関数
  const applyRoomColor = ($elements) => {
    $elements.each((_, elem) => {
      const textContent =
        elem?.childNodes[0]?.childNodes[0]?.childNodes[0]?.childNodes[1]
          ?.childNodes[0]?.textContent || "";
      for (const [room, color] of Object.entries(roomColors)) {
        if (textContent.startsWith(room)) {
          $(elem.childNodes[0]).css("background-color", color);
          break;
        }
      }
    });
  };

  // 各曜日ごとに data-date 属性で要素を取得して処理
  days.forEach((day) => {
    const $elements = $(
      `#FullCalendar td.fc-timegrid-col[data-date][class*='fc-day-${day}'] > div > div:nth-child(2) > div`
    );
    applyRoomColor($elements);
  });
};

 苦労した点画面上からレコード Id が取れれば、api を利用して施設名を取得できれば良かったのだけれど、今回はタイトルの施設名を条件にしました。

ここに気づくまで何度も試行錯誤しました。
あと、html/css に不慣れなので、要素の指定に苦労しました。

曜日に分かれていたところと、ソースからは見えませんが、現在/過去/未来で違う指定になっている所があって、どうしたら最適化するか悩みました。
概要

手順

苦労した点

Discussion
