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

フォローする

Index

概要

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

前提条件と注意事項

  • この機能は、現時点では「Garoon on cybozu.com」のクラウド版が必要です。(2017年8月時点)
  • 2017年8月版で新しく追加された「グループ週画面が表示されたときのイベント」を使用しているため、グループ週表示のみが対象となります。
  • サンプルプログラムは、その動作を保証するものではありません。
  • サンプルプログラムの技術的なサポート等は行っていません 。

できること

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

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

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

完成イメージ

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

例)「勤怠締切日」と「交通費申請締切日」のアラート表示
scheduleNotice01.png

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

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

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

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

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

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

詳細手順

  1. 下記のサンプルコードをエディタにコピーして、ファイル名を「scheduleNotification.js」、文字コードを「UTF-8」で保存します。
    ※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
  2. 下記のサンプルコードをエディタにコピーして、ファイル名を「scheduleNotification.css」、文字コードを「UTF-8」で保存します。
    ※ファイル名は任意ですが、ファイルの拡張子は「css」にしてください。
  3. [システム管理(各アプリケーション) > スケジュール > JavaScript / CSSによるカスタマイズ]の画面を表示し、「カスタマイズグループを追加する」をクリックします。
    scheduleNotice02.png

  4. 「カスタマイズ」項目の「適用する」を選択し、「カスタマイズグループ名」に任意のグループ名を入力します。
  5. 「適用対象」項目の「変更する」をクリックし、ユーザー/組織/ロールの選択画面でカスタマイズの適用範囲(ユーザー/組織/ロール)を選択し、「適用する」ボタンをクリックします。
  6. 「JavaScriptカスタマイズ」項目に1.で保存した「scheduleNotification.js」と以下のライブラリーを、
    「CSSカスタマイズ」項目に2.で保存した「scheduleNotification.css」を指定して「追加する」をクリックします。
    このカスタマイズでは、Cybozu CDNの次のライブラリーを使用します。
    scheduleNotice03.png

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

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

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

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

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

おわりに

今回は新機能紹介のためシンプルな日付判定にしましたが、Ultradate.jsというライブラリを使うと営業日の判定も可能になります。
こちらの記事などを参考にしてぜひチャレンジしてみてください!

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。
Powered by Zendesk