【Garoon JavaScript API】スケジュールに締切日アラートを表示する

目次

概要

Garoon のスケジュールの特定の日にアラートを表示させるサンプルです。
たとえば、勤怠や支払い申請の締切日に表示させるなど、意識してもらいたいスケジュールの共有に役立ちます。

前提条件と注意事項

できること

勤怠入力に交通費申請、出張申請…それぞれ締切が決まっている提出物はたくさんありますよね。
忘れないようにスケジュールへ登録しておいても、スケジュールやタスクがたくさんあると埋もれてしまい、大事な締切を見落としてしまうこともあるのではないでしょうか。

  • 全社員、あるいはグループごとにアラートを表示したい。
  • 他のタスクや予定に埋もれないよう、アラートを目立たせたい。

今回は、このようなご要望を満たすサンプルを紹介します!

完成イメージ

  • スケジュール(グループ週表示)にて、スケジュールの特定の日の最上部にアラートを表示します。
  • アラートは、ログインしているユーザ(=自分)のスケジュール欄にのみ表示されます。
    自分以外のスケジュール欄には表示されません。
  • 適用範囲は、グループや個人で指定できます。
  • 表示するアラートの文言や文字色、背景色等は、JavaScript/CSS ファイルで自由に設定可能です。

例)「勤怠締切日」と「交通費申請締切日」のアラートを表示する。

登録されているタスクやスケジュールに埋もれることなく、締切を確認できますね!

JavaScript/CSSカスタマイズ設定手順

Garoon のスケジュールに対して JavaScript/CSS のカスタマイズを適用するためには、適用したい範囲(ユーザ/グループ)に合わせてカスタマイズグループを作成し、適用したい JavaScript/CSS を設定します。

今回のサンプルコードでは、「 予定枠最上部の要素を取得する」を使って、スケジュールの特定の日にアラートを表示する処理を行います。
アラートの内容は以下のとおりです。

表示条件 表示内容
毎月2日 勤怠締切日です
毎月3日 交通費申請締切日です

アラートの表示条件や表示内容は、必要に応じてサンプルコードの内容を変更してください。

詳細手順

  1. 次のサンプルコードをエディタにコピーして、ファイル名を「scheduleNotification.js」、文字コードを「UTF-8」で保存します。
    ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    
    /*
    * Garoon JavaScript API of sample program
    * Copyright (c) 2017 Cybozu
    *
    * Licensed under the MIT License
    */
    (function() {
      'use strict';
      const myJQuery = jQuery.noConflict(true);
    
      (function($) {
        // グループ週画面が表示されたときのイベント
        garoon.events.on('schedule.calendar.groupWeekIndex.show', (event) => {
          const dates = event.dates;
          let templateHtml = '';
          let template;
          let data = {};
          let space;
          let day;
          dates.forEach((date) => {
            // 年月日から日を取得
            day = date.substr(8, 2);
            if (day === '02') {
              templateHtml = '<div class="alertDefault alert01" title={{>text}}><b>{{>text}}</b></div>';
              template = $.templates(templateHtml);
              data = {text: ' 勤怠締切日です'};
    
              // スケジュールの予定枠最上部の空白要素を取得
              space = garoon.schedule.calendar.getDayFirstSpaceElement('GROUP_WEEK', date);
    
              // 空白要素へhtmlをセット
              $(space).html(template(data));
    
            } else if (day === '03') {
              templateHtml = '<div class="alertDefault alert02" title={{>text}}><b>{{>text}}</b></div>';
              template = $.templates(templateHtml);
              data = {text: ' 交通費申請締切日です'};
    
              // スケジュールの予定枠最上部の空白要素を取得
              space = garoon.schedule.calendar.getDayFirstSpaceElement('GROUP_WEEK', date);
    
              // 空白要素へhtmlをセット
              $(space).html(template(data));
            }
          });
        });
      })(myJQuery);
    })();
  2. 次のサンプルコードをエディタにコピーして、ファイル名を「scheduleNotification.css」、文字コードを「UTF-8」で保存します。
    ファイル名は任意ですが、ファイルの拡張子は「css」にしてください。

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    
    div.alertDefault {
        padding:4px;
        margin:0 4px 8px;
        line-height:1.2;
    }
    div.alert01 {
        background: salmon;
        color: white;
    }
    div.alert02 {
        background: khaki;
        color: saddlebrown;
    }
  3. [システム管理(各アプリケーション)/スケジュール/ JavaScript / CSS によるカスタマイズ]の画面を表示し、「カスタマイズグループを追加する」をクリックします。

  4. 「カスタマイズ」項目の「適用する」を選択し、「カスタマイズグループ名」に任意のグループ名を入力します。

  5. 「適用対象」項目の「変更する」をクリックし、ユーザー/組織/ロールの選択画面でカスタマイズの適用範囲(ユーザー/組織/ロール)を選択し、「適用する」ボタンをクリックします。

  6. 「JavaScript カスタマイズ」項目に 1. の scheduleNotification.js と以下のライブラリーを、
    「CSS カスタマイズ」項目には 2. の scheduleNotification.css を指定し「追加する」をクリックします。
    このカスタマイズでは、 Cybozu CDN の次のライブラリーを使用します。

以上ですべての設定が完了しました。
スケジュール(グループ週表示)にアラートが表示されれば成功です!

注意点:スケジュールのオプション設定

スケジュールのオプションで「タイトルをすべて表示する」をオフに設定した場合、アラート文言が長いと全文を表示できないことがあります。
スクロールもできないので、これではアラートを最後まで確認できません。

今回のサンプルでは、div タグに title 属性を追加することで対応してみました。
マウスカーソルを合わせると、アラート文言と同じ内容が表示されます。

Garoon のスケジュールは、利用ユーザーが表示の設定を変えることが可能です。
設定を変えた場合にも問題なく利用できるか、考慮することも大切ですね。

おわりに

今回はシンプルな日付判定にしましたが、 holiday_jp-js (External link) というライブラリを使うと祝日の判定も可能になります。
kintone カスタマイズで、holiday_jp-js を使って営業日/休業日を判定する などを参考にしてぜひチャレンジしてみてください!