イベントカレンダープラグイン
概要
kintone の一覧画面で、登録したレコードをカレンダーで表示できるプラグインです。
kintone の「カレンダー」形式では不可能な、次の機能を利用できます。
- 月次カレンダー/週次カレンダー/日次カレンダーの切り替え
- カレンダー上でイベント日時の変更
- カレンダー上での、イベントの開始から終了までの期間の確認
- プロセス管理と連携した、イベントの進捗状況の確認
注意事項
- サンプルプラグインに関するお問い合わせは、API サポート窓口へのお問い合わせの対象外です。
- kintone プラグインは、スタンダードコースでのみ利用できます。
制限事項
- モバイル用のブラウザーおよび kintone モバイルには対応していません。
- ゲストスペースでは使用できません。
- プロセス管理が無効、またはプラグイン設定画面とステータス名が合わない場合、イベント背景色は青色になります。
プラグインの機能
カレンダー形式の表示
「スケジュール」一覧に、登録したレコード(イベント)が表示されます。
表示されたイベントをクリックすると、当該のイベントの詳細画面に移動します。
カレンダーの表示形式切り替え
次の 3 種類の表示形式に対応しています。
- 月次カレンダー
- 週次カレンダー
- 日次カレンダー
右上のボタンから切り替えできます。
イベントの操作
イベントをドラッグ&ドロップすると、イベントの日時を変更できます。
週次カレンダー/日次カレンダーでは、イベントの時間を変更できます。
- 週次カレンダー:1 時間単位
- 日次カレンダー:30 分単位
イベントの絞り込み
kintone の絞り込み機能を使うと、任意のイベントのみ表示できます。
一覧に表示するレコードを絞り込む
初期表示時点で絞り込みたい場合には、「スケジュール」の一覧の設定でレコードの表示条件を設定してください。
STEP3:一覧に表示したいレコードの条件を設定する
プラグインのパッケージング
プラグイン化の手順の詳細は kintone プラグイン開発手順 を参照してください。
STEP1:ソースコードのダウンロード
GitHub
にアクセスしてフォルダーごとダウンロードしてください。
「examples/eventCalendar」が、このプラグインのソースコード一式です。
ファイルの構成
「examples/eventCalendar」配下のファイル構成は次のとおりです。
|
|
STEP2:パッケージング
plugin-packer の手順を参考にパッケージングします。
パッケージングしたサンプル
このプラグインはプラグイン開発のためのサンプルで、サポート対象外です。
ご理解の上、ダウンロードしてください。
SAMPLE_eventCalendar_plugin_v1.4.2.zip
プラグインの設定
STEP1:プラグインの読み込み
kintone システム管理画面で、パッケージングしたファイル(zip ファイル)を読み込みます。
ファイルからプラグインを読み込む
STEP2:アプリの追加
-
アプリを追加します。
-
次のフィールドを配置します。
フィールド フィールドの種類 備考 イベント名のフィールド 文字列(1 行) イベントタイトルに使用します。 イベントの開始日時のフィールド 日時 イベントの開始日時に使用します。 イベントの終了日時のフィールド 日時 イベントの終了日時に使用します。 ほかのフィールドの配置は任意です。
-
カレンダーで進捗状況を確認したい場合には、プロセス管理を設定します。
進捗状況は、ステータスによって色分けされて表示されます。
プロセス管理の基本的な使いかた
STEP3:プラグインの追加と設定
-
アプリの設定画面を開き、プラグインを追加します。
アプリにプラグインを追加する -
プラグインの設定画面を開き、項目を設定します。
項目名 必須 説明 イベント名フィールド 必須 イベント名のフィールド 開始日時フィールド 必須 イベント開始日時のフィールド 終了日時フィールド 必須 イベント終了日時のフィールド ステータス 省略可 進捗状況の色分け設定
進捗状況をステータスによって色分けしたい場合に設定します。最大5つまで設定できます。- ステータス:プロセス管理で設定したステータス名
- 背景色:ステータスの背景色
次のいずれかの書式で設定します。- 色の名前(英語表記)
例:「blue」
使用できる値は <named-color>を参照してください。
- カラーコード(16進数)
- RGB 表記
例:「#ff0000」 - 16進数表記
例:rgb(0,128,0)」
- 色の名前(英語表記)
-
【保存】をクリックします。
-
「アプリの設定」画面で、【設定完了】をクリックします。
このとき「スケジュール」一覧がアプリに追加されます。
STEP4:動作確認
-
レコードを追加します。
以下の項目は必須項目です。- タイトル
- 開始日時
- 終了日時
「開始日時」以降の日時に設定してください。
-
「スケジュール」一覧を表示します。 登録したレコードが表示されていることを確認します。
プラグイン拡張のアイディア
このプラグインをベースにソースコードを改修すると、次のような機能も実現可能です。
- 日付をクリックすることで、デフォルトでクリックした日付が入った状態のレコード新規作成画面を表示する。
- 日付の背景色や日付の数字の色を変更する。
- 祝日の背景色や日付の数字の色を変更する。
- モーダルウィンドウでレコード編集画面等を出すことで、完全に操作をカレンダー画面だけで完結させる。
- 週の開始曜日を変更する。
- 終日予定を登録する。
更新履歴
- 2016 年 7 月 27 日 v1.0 を公開
- 2016 年 7 月 29 日 v1.1 を公開
- 2017 年 5 月 8 日 v1.2 を公開
- レコードを全件取得してカレンダーで表示できるように修正しました。
- 2017 年 8 月 25 日 v1.3 を公開
- css の「51-us-default.css」を「51-modern-default.css」に修正しました。
- その他軽微な修正を実施しました。
- 2017 年 12 月 1 日 v1.4 を公開
- プログラムで使用しているフォーム設計情報取得 API を、フィールドの一覧を取得する API に置き換えました。
- 2021 年 2 月 1 日 v1.4.1 を公開
- 一覧での絞り込み条件がカレンダーに反映されない不具合を修正しました。
- 2022 年 10 月 5 日 v1.4.2 を公開
- フロントエンド基盤の刷新 に対応しました。
利用している OSS のライセンス情報
このプラグインで利用している OSS のライセンスは次のとおりです。