Tips

イベントカレンダープラグイン

目次

概要

kintone の一覧画面で、登録したレコードをカレンダーで表示できるプラグインです。
kintone の「カレンダー」形式では不可能な、次の機能を利用できます。

  • 月次カレンダー／週次カレンダー／日次カレンダーの切り替え
  • カレンダー上でイベント日時の変更
  • カレンダー上での、イベントの開始から終了までの期間の確認
  • プロセス管理と連携した、イベントの進捗状況の確認

注意事項

  • サンプルプラグインに関するお問い合わせは、API サポート窓口へのお問い合わせの対象外です。
  • kintone プラグインは、スタンダードコースでのみ利用できます。

制限事項

  • モバイル用のブラウザーおよび kintone モバイルには対応していません。
  • ゲストスペースでは使用できません。
  • プロセス管理が無効、またはプラグイン設定画面とステータス名が合わない場合、イベント背景色は青色になります。

プラグインの機能

カレンダー形式の表示

「スケジュール」一覧に、登録したレコード（イベント）が表示されます。

表示されたイベントをクリックすると、当該のイベントの詳細画面に移動します。

カレンダーの表示形式切り替え

次の 3 種類の表示形式に対応しています。

  • 月次カレンダー
  • 週次カレンダー
  • 日次カレンダー

右上のボタンから切り替えできます。

イベントの操作

イベントをドラッグ＆ドロップすると、イベントの日時を変更できます。

週次カレンダー／日次カレンダーでは、イベントの時間を変更できます。

  • 週次カレンダー：1 時間単位
  • 日次カレンダー：30 分単位

イベントの絞り込み

kintone の絞り込み機能を使うと、任意のイベントのみ表示できます。
一覧に表示するレコードを絞り込む (External link)

初期表示時点で絞り込みたい場合には、「スケジュール」の一覧の設定でレコードの表示条件を設定してください。
STEP3：一覧に表示したいレコードの条件を設定する (External link)

プラグインのパッケージング

プラグイン化の手順の詳細は kintone プラグイン開発手順 を参照してください。

STEP1：ソースコードのダウンロード

GitHub (External link) にアクセスしてフォルダーごとダウンロードしてください。
「examples/eventCalendar」が、このプラグインのソースコード一式です。

ファイルの構成

「examples/eventCalendar」配下のファイル構成は次のとおりです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

examples/eventCalendar
├── README.md
├── css
│   ├── 51-modern-default.css
│   ├── config.css
│   └── customize.css
├── html
│   └── config.html
├── image
│   └── icon.png
├── js
│   ├── config.js
│   └── customize.js
└── manifest.json

STEP2：パッケージング

plugin-packer の手順を参考にパッケージングします。

パッケージングしたサンプル

このプラグインはプラグイン開発のためのサンプルで、サポート対象外です。
ご理解の上、ダウンロードしてください。

SAMPLE_eventCalendar_plugin_v1.4.2.zip (External link)

プラグインの設定

STEP1：プラグインの読み込み

kintone システム管理画面で、パッケージングしたファイル（zip ファイル）を読み込みます。
ファイルからプラグインを読み込む (External link)

STEP2：アプリの追加

  1. アプリを追加します。

  2. 次のフィールドを配置します。

    フィールド フィールドの種類 備考
    イベント名のフィールド 文字列（1 行） イベントタイトルに使用します。
    イベントの開始日時のフィールド 日時 イベントの開始日時に使用します。
    イベントの終了日時のフィールド 日時 イベントの終了日時に使用します。

    ほかのフィールドの配置は任意です。

  3. カレンダーで進捗状況を確認したい場合には、プロセス管理を設定します。
    進捗状況は、ステータスによって色分けされて表示されます。
    プロセス管理の基本的な使いかた (External link)

STEP3：プラグインの追加と設定

  1. アプリの設定画面を開き、プラグインを追加します。
    アプリにプラグインを追加する (External link)

  2. プラグインの設定画面を開き、項目を設定します。

    項目名 必須 説明
    イベント名フィールド 必須 イベント名のフィールド
    開始日時フィールド 必須 イベント開始日時のフィールド
    終了日時フィールド 必須 イベント終了日時のフィールド
    ステータス 省略可 進捗状況の色分け設定
    進捗状況をステータスによって色分けしたい場合に設定します。最大5つまで設定できます。
    • ステータス：プロセス管理で設定したステータス名
    • 背景色：ステータスの背景色
      次のいずれかの書式で設定します。
      • 色の名前（英語表記）
        例：「blue」
        使用できる値は <named-color> (External link) を参照してください。
      • カラーコード（16進数）
      • RGB 表記
        例：「#ff0000」
      • 16進数表記
        例：rgb（0,128,0）」

  3. 【保存】をクリックします。

  4. 「アプリの設定」画面で、【設定完了】をクリックします。
    このとき「スケジュール」一覧がアプリに追加されます。

STEP4：動作確認

  1. レコードを追加します。
    以下の項目は必須項目です。

    • タイトル
    • 開始日時
    • 終了日時
      「開始日時」以降の日時に設定してください。

  2. 「スケジュール」一覧を表示します。 登録したレコードが表示されていることを確認します。

プラグイン拡張のアイディア

このプラグインをベースにソースコードを改修すると、次のような機能も実現可能です。

  • 日付をクリックすることで、デフォルトでクリックした日付が入った状態のレコード新規作成画面を表示する。
  • 日付の背景色や日付の数字の色を変更する。
  • 祝日の背景色や日付の数字の色を変更する。
  • モーダルウィンドウでレコード編集画面等を出すことで、完全に操作をカレンダー画面だけで完結させる。
  • 週の開始曜日を変更する。
  • 終日予定を登録する。

更新履歴

  • 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 のライセンスは次のとおりです。