Garoon開発Tips

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

目次

概要

固定リンクがコピーされました

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

前提条件と注意事項

固定リンクがコピーされました

できること

固定リンクがコピーされました

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

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

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

完成イメージ

固定リンクがコピーされました

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

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

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

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

固定リンクがコピーされました

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

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

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

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

詳細手順

固定リンクがコピーされました

  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. それぞれ次のように指定し、「追加する」をクリックします。
    このカスタマイズでは、 Cybozu CDN を使用しています。

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

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

固定リンクがコピーされました

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

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

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

おわりに

固定リンクがコピーされました

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