サポート > リポジトリ > 画面機能 > カレンダビュー(モダン)
ja | en

JavaScript ベースのカレンダビューです。ドラッグ&ドロップ操作に対応した UI を提供します。 R7.6

モダンカレンダビューを用いた「スケジュール」モデルの例を紹介します。標準は「月」表示ですが、「日」「4日間」「週」を切り替えることができます。

図1 モダンカレンダビュー 月表示
図2 モダンカレンダビュー 週表示
図3 モダンカレンダビュー 4日間表示
図4 モダンカレンダビュー 日表示

タイトル部をマウスで押下すると、詳細情報を示すダイアログが開きます。このダイアログから「詳細画面への遷移」「更新画面への遷移」「削除」を行うことができます。

図5 詳細ダイアログ

モデルの定義

スケジュールモデルの定義を示します。「開始日付時刻」と「終了日付時刻」項目はそれぞれ「日付・時刻型」とします。

図6 スケジュールモデルの定義
図7 日付・時刻型の詳細で、日付時刻を選択する

カレンダビューの設定

「画面>ビュー>カレンダビュー」を開きます。「画面を作成する」をチェックし、ページタイトルを設定します。

「表示方式」を "モダン" にします。

図8 モダンカレンダビューの設定

項目設定欄に、モデルの項目を割り当てます。次のルールがあります。

設定値 対応する項目の型 説明 必須
開始日時 日付時刻 この日付情報を元にカレンダビューに表示を行います。
終了日時 日付時刻 この日付情報を元にカレンダビューに表示を行います。開始日時と終了日時は複数日にまたがることもできます。(5月1日から5月5日まで、など)
タイトル 文字列、整数、モデル参照 カレンダビューに表示する項目として定義します。
担当者 文字列、整数、モデル参照 カレンダビューに表示する項目として定義します。 -
場所 -
備考 -
URL -
終日 カレンダ終日フラグモデル参照 この値をセットすると、終日イベント扱いになります。[後述] -
開始日付時刻と終了日付時刻は必ず設定してください。(開始と終了の両方の設定が必要です。)

メニューの設定

「スケジュールカレンダビュー」ボタンをメニューに用意します。ここでは背景色も変えています。

図9 メニューの設定

モデルの色を指定することができます。「橙色」に変更した例を示します。

図10 カレンダ表示時のモデルの色を変更する
図11 色が変更された

定義方法

「問い合わせ (ask)」モデルを用意します。カレンダビューを使うようにします。

図12 問い合わせモデル

先に用意した「スケジュール」モデルのカレンダビューで「同時に表示するモデル」に、問い合わせモデルを指定します。(モデルID "ask" を記載します。)

図13 問合せモデルを同時に表示する設定

複数のモデルを指定することもできます。2つ以上指定する場合は、「,(カンマ)」区切りでモデルIDを記述します。 例:modelA,modelB

実行例

スケジュールカレンダビューでは、問い合わせモデルも同時に表示されています。ここではモデル毎に表示色を設定しています。

図14 複数モデルを同一カレンダビューに表示する

問い合わせモデルでは同時に表示するモデルを指定していません。この場合、イベントモデルのカレンダビューは自分自身(イベントモデル)のみが表示されます。

図15 単一モデルのみの表示に切り替わる

定義方法

カレンダの時刻表示範囲(開始時刻、終了時刻)を指定できます。

図16 時刻表示範囲の設定

実行例

「日」「4日間」「週」形式において、指定した開始時刻から終了時刻までの範囲で表示されるようになります。

図17 時刻表示範囲を指定したカレンダビュー

カレンダ上で、スケジュールをドラッグ&ドロップ操作することができます。日付・時刻を変更できます。

図18 ドラッグ&ドロップによる操作

動作例

そのイベントを「終日」とすることができます。月単位の場合、表示方法が変わります。

図19 終日イベントの表示(月単位)

週単位の場合、開始時間軸の上部に表示されます。

図20 終日イベントの表示(週単位)

設定方法

終日フラグを格納する項目を用意します。

図21 終日フラグを格納する項目を用意する

システムが提供する「カレンダ終日フラグ」を参照します。入力タイプは「リストボックス」「ラジオボタン」「チェックボックス」のいずれかとしてください。

図22 終日フラグのモデル参照設定

データの登録

対象イベントを登録する際、開始日付時刻は0時0分を起点とし、終了日付時刻は翌日の0時0分としてください。あわせて、終日フラグをセットしてください。

図23 終日イベントの開始と終了の設定

「ポータル > カレンダポートレット(モダン)」をお読みください。

新規登録画面へ遷移する7.10

カレンダの日付をダブルクリックすると、新規登録用のダイアログが開きます。

図24 日付をダブルクリックすると表示されるダイアログ
図25 モデルを選択し、タイトルと開始・終了日時を指定できる
図26 新規登録画面が開く

定義方法

「初期値 > 登録画面表示時」のタイミングで、ダイアログから渡されるパラメータを受け取るための式を指定します。対象は「開始日時」「終了日時」「タイトル」に相当する項目です。

図27 「初期値 > 登録画面表示時」に式を指定する

式は次のとおりです。

項目
開始日時 DATETIMEVALUE(REQUEST("jfcCalendarStartDateTime"))
終了日時 DATETIMEVALUE(REQUEST("jfcCalendarEndDateTime"))
タイトル REQUEST("jfcCalendarTitle")
終日フラグ
(チェックボックスとした場合)
IF(
NOT(ISBLANK(REQUEST("jfcCalendarAllDay"))),
ARRAY_INT(TOINT(REQUEST("jfcCalendarAllDay"))),
ARRAY_INT()
)
新規登録ダイアログで終日フラグにチェックを付けたとき、開始日時は0:00となります。終了日時は開始日時の翌日となります。

モダンカレンダビューは内部で REST API を使っています。そのため、ISREST 関数を使って「通常の検索画面と、モダンカレンダビューで異なる検索条件の初期値をセットする」ような設定を行うことができます。

IF(ISREST(), モダンカレンダビューでの検索条件初期値, 通常の検索画面での検索条件初期値)
この指定は、カレンダポートレット(モダン)にも反映されます。
クラシックカレンダビューは REST API を使っていないので ISREST関数での判定は行えません。代わりにSCREENTYPE 関数を利用するとよいでしょう。

例 モダンカレンダビューでは検索条件を指定しない

数値型項目で、モダンカレンダビューでは検索条件を指定せず、通常の検索画面では初期値 1 を指定する場合は次のようになります。

IF(ISREST(),null,1)

同梱している休日情報

Wagby は mozilla が提供する日本の公休日情報 "JapanHolidays.ics" を同梱しています。 これは iCalendar 形式で記述されています。

別の休日ファイルを利用する場合、customize/webpage/WEB-INF/JapanHoliday.ics として保存してください。(ファイル名は固定となります。)保存後、ビルドを行うと反映されます。

独自の休日を設定する

会社の創立記念日など、独自の休日情報を設定することもできます。「カレンダビュー(クラシック)> 休日の扱い」をお読みください。

  • カレンダビューの「開始日付時刻」「終了日付時刻」に指定されている項目は、「値をデータベースに保存する」を指定する必要があります。
  • カレンダビューの「開始日付時刻」「終了日付時刻」に指定されている項目が自動計算によって導出される場合、ドラッグ&ドロップによる移動操作は無効になります。

クラシックカレンダビューで登録済みのデータを、モダンカレンダビューへ変換することができます。

具体的な方法は「サポート > インポートとエクスポート機能活用ガイド(R7) > クラシックカレンダビューのデータをモダンカレンダビューへ取り込む」をお読みください。