概要
Garoonのスケジュールの特定の日にアラートを表示させるサンプルです。
たとえば、勤怠や支払い申請の締切日に表示させるなど、意識してもらいたいスケジュールの共有に役立ちます。
前提条件と注意事項
- この機能は、クラウド版 Garoon または パッケージ版 Garoon 4.6以降の環境が必要です。
- 「グループ週画面が表示されたときのイベント」を使用しているため、グループ週表示のみが対象となります。
- サンプルプログラムは、その動作を保証するものではありません。
- サンプルプログラムの技術的なサポート等は行っていません 。
できること
勤怠入力に交通費申請、出張申請・・・それぞれ締切が決まっている提出物、たくさんありますよね。
忘れないようにスケジュールへ登録しておいても、スケジュールやタスクがたくさんあると埋もれてしまい、大事な締切を見落としてしまうこともあるのではないでしょうか。
- 全社員、あるいはグループごとにアラートを表示したい
- 他のタスクや予定に埋もれないよう、アラートを目立たせたい
今回は、このようなご要望を満たすサンプルをご紹介いたします！
完成イメージ
- スケジュール（グループ週表示）にて、スケジュールの特定の日の最上部にアラートを表示します。
- アラートは、ログインしているユーザ（＝自分）のスケジュール欄にのみ表示されます。
自分以外のスケジュール欄には表示されません。 - 適用範囲は、グループや個人で指定することが可能です。
- 表示するアラートの文言や文字色、背景色等は、JavaScript／CSSファイルで自由に設定可能です。
例）「勤怠締切日」と「交通費申請締切日」のアラート表示
たくさん登録されているタスクやスケジュールに埋もれることなく、締切を確認することができますね！
JavaScript／CSSカスタマイズ設定手順
Garoonのスケジュールに対してJavaScript／CSSのカスタマイズを適用するためには、適用したい範囲（ユーザ／グループ）に合わせてカスタマイズグループを作成し、適用したいJavaScript／CSSを設定します。
今回のサンプルコードでは、「ログインユーザーのスケジュールの予定枠最上部の空白要素を取得する」を使って、スケジュールの特定の日にアラートを表示する処理を行います。
アラートの内容は以下の通りです。
| 表示条件 | 表示内容 |
| 毎月２日 | 勤怠締切日です |
| 毎月３日 | 交通費申請締切日です |
※アラートの表示条件や表示内容は、必要に応じてサンプルコードの内容を変更してください。
詳細手順
- 下記のサンプルコードをエディタにコピーして、ファイル名を「scheduleNotification.js」、文字コードを「UTF-8」で保存します。
※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。 - 下記のサンプルコードをエディタにコピーして、ファイル名を「scheduleNotification.css」、文字コードを「UTF-8」で保存します。
※ファイル名は任意ですが、ファイルの拡張子は「css」にしてください。 - [システム管理（各アプリケーション） > スケジュール > JavaScript / CSSによるカスタマイズ]の画面を表示し、「カスタマイズグループを追加する」をクリックします。
- 「カスタマイズ」項目の「適用する」を選択し、「カスタマイズグループ名」に任意のグループ名を入力します。
- 「適用対象」項目の「変更する」をクリックし、ユーザー/組織/ロールの選択画面でカスタマイズの適用範囲（ユーザー/組織/ロール）を選択し、「適用する」ボタンをクリックします。
- 「JavaScriptカスタマイズ」項目に1.で保存した「scheduleNotification.js」と以下のライブラリーを、
「CSSカスタマイズ」項目に2.で保存した「scheduleNotification.css」を指定して「追加する」をクリックします。
このカスタマイズでは、Cybozu CDNの次のライブラリーを使用します。
以上ですべての設定が完了しました。スケジュール（グループ週表示）にアラートが表示されれば成功です！
注意点：スケジュールのオプション設定
スケジュールのオプションで「タイトルをすべて表示する」をオフに設定した場合、アラート文言が長いと表示が途中で切れてしまいます。
スクロールもできないので、これではアラートを最後まで確認することができません。
今回のサンプルでは、divタグにtitle属性を追加することで対応してみました。
マウスカーソルを合わせると、アラート文言と同じ内容が表示されます。
Garoonのスケジュールは、利用ユーザーが表示の設定を変えることが可能です。
設定を変えた場合にも問題なく利用することができるか、考慮することも大切ですね。
おわりに
今回は新機能紹介のためシンプルな日付判定にしましたが、holiday_jp-js というライブラリを使うと祝日の判定も可能になります。
こちらのナレッジノートなどを参考にしてぜひチャレンジしてみてください！
ご質問失礼いたします。
こちらの開発とても便利に思っております。
こちらなのですが、例えば、
1つの予定（A社メンテナンス）を3か月周期・6か月周期・12ヵ月周期の特定の日で登録できたりするのでしょうか。
どうぞよろしくお願いいたします。
yacci1129 様
お世話になっております。cybozu developer network 運営事務局です
こちらは記事に対するフィードバックの欄となっておりますため、
記事の内容の発展などのご質問は、大変お手数ですがコミュニティにお願いできますでしょうか。
コミュニティのほうが多くの方がご覧になっているため、アドバイスも得やすいかと思います。
cybozu developer network 運営事務局 様
お世話になっております。
承知いたしました。
わざわざコメントいただきありがとうございます。
コミュニティにて投稿させていただきます。
お世話になっております。
こちらは曜日指定でのアラートは可能でしょうか？
n 様
お世話になっております。cybozu developer network 運営局です。
はい、曜日指定は可能です。
サンプルコードでは、21行目から51行目のループ内で、日付に対して if 文で条件判定しています。
この部分で、「date の曜日を取得、もし何曜日だったら〜」という処理を記載すればよいかと思います。
なお、こちらは記事に対するフィードバックの欄となっております。
記事の内容を発展してカスタマイズしたいというご質問は、お手数ですがコミュニティにお願いいたします。
お世話になっております。
ご回答頂きありがとうございます。
試してみたのですが、うまくゆかず出来れば月曜日だった場合のサンプルコードを教えて頂けますでしょうか？
宜しくお願い致します。
n 様
お世話になっております。cybozu developer network 運営局です。
申し訳ございません。こちらは記事に対するフィードバックのため、発展した内容に関する個別の質問は受け付けておりません。
お手数おかけしますが、有志の開発者で運営しているコミュニティにて、ご質問お願いいたします。