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

目次

概要

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.3.zip

プラグインの設定

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を公開
  • 2023年11月9日v1.4.3を公開
    • プラグインのhomepage_urlを修正しました。

利用しているOSSのライセンス情報

このプラグインで利用しているOSSのライセンスは次のとおりです。