概要
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.3.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を公開
- フロントエンド基盤の刷新に対応しました。
- 2023年11月9日v1.4.3を公開
- プラグインのhomepage_urlを修正しました。
利用しているOSSのライセンス情報
このプラグインで利用しているOSSのライセンスは次のとおりです。
-
Moment.js
- Author: Tim Wood, Iskren Chernev, Moment.js contributors
- License: MIT License
-
FullCalendar
- Author: Adam Shaw
- License: MIT License
-
jQuery
- Author: jQuery Foundation, Inc.
- License: MIT License
-
JsRender
- Author: Boris Moore
- License: MIT License
-
51-modern-default
- Author: Cybozu, Inc.
- License: MIT License