アプリのカレンダービューで文字色と背景色を設定する

アプリ活用研究会

2023年11月12日 08:42

やりたいこと

アプリのカレンダービューに、行事種別等のフィールド値で、表示するイベント名の文字背景色を3通りに変化させる処理を考えました。

アプリストアから作成できる行事カレンダーアプリを改造して、ドロップダウン型の行事種別（社内会議、客先訪問、展示会、その他）を追加し、レコードタイトルに「行事種別」を追加します。

レコードタイトルを設定する設定方法は、以下の記事をご参照ください。

例として、社内会議はブルー、客先訪問はオレンジ、展示会はイエローに文字背景色を設定します。カレンダービューの文字背景色を設定することは標準機能では出来ませんので、今回はこの部分をJavascriptによるカスタマイズで実装します。

カレンダービューに文字背景色を付けるJavascriptコード

初期設定で色を割り当てたい「行事種別」の値をアプリの設定に合わせて変更するだけで動作するはずです。

// カレンダービューの表示時にセルの値に応じて、文字色、フィールドの背景色を変更する
kintone.events.on('app.record.index.show', function(event) {

  // 初期設定
  const BLUE_CONDITION = "社内会議";
  const YELLOW_CONDITION = "展示会";
  const ORANGE_CONDITION = "顧客訪問";
  const eles = document.getElementsByClassName("cellitem-value-gaia");

  Array.from(eles).forEach((ele) => {
    let content = ele.textContent;
    switch (true) {
      case content.includes(BLUE_CONDITION):
        ele.style.color = 'black';
        ele.style.backgroundColor = 'deepskyblue';
        ele.style.fontWeight = 'bold';
        break;
      case content.includes(YELLOW_CONDITION):
        ele.style.color = 'black';
        ele.style.backgroundColor = '#d7c447';
        ele.style.fontWeight = 'bold';
        break;
      case content.includes(ORANGE_CONDITION):
        ele.style.color = 'black';
        ele.style.backgroundColor = 'orange';
        ele.style.fontWeight = 'bold';
        break;
      default:
        ele.style.color = 'black';
        ele.style.fontWeight = 'normal';
    }
  });

});

【注意点】
今回のカスタマイズでは、kintoneのclass属性を使用していますが、kintoneの各要素で使われているid/class属性の値は、Kintoneのアップデートで予告なく変更されることがあり、アップデートの影響で今回のカスタマイズが動作しなくなる（色が出なくなる）リスクがあることを、予めご承知ください。

kintone で使われている各要素に付与されている id や class 属性の値は、予告なく変更されます。DOM 構造についても変更されることがあります。
カスタマイズするときは、id や class 属性の値、および DOM 構造を変更するカスタマイズを加えないでください。
引用：kintone コーディングガイドライン

https://cybozu.dev/ja/kintone/docs/guideline/coding-guideline/#kintone-update

もっと、Googleカレンダーの様なビジュアルで多機能のカレンダービューが欲しい場合は、Kintoneの公式ページで紹介されている有料のカレンダープラグインがありますので、ご参考までに紹介リンクを貼っておきます。

よろしければサポートお願いします！いただいたサポートは、note記事制作の活動費に使わせていただきます！