Domino Voltでカレンダービューを実装してみた

*** This article translated Implemented a calendar view in Domino Volt into Japansese.

*** この記事は、Implemented a calendar view in Domino Voltを日本語に翻訳したものです。


皆さん、こんにちは。
予告通り、Domino Voltアプリケーションでカレンダービューを実装する方法を紹介します。
今回紹介するアプリケーションは、FullCalendarをDomino Voltで利用できるようにしたものです。


1.FullCalendarについて

FullCalendarは、カレンダービューを表示するためのJavaScriptライブラリで、カレンダーのタイプを変更できたり(月、週、日)、ロケールを変更できたり、ドラッグ&ドロップでデータを編集できたりと、多機能でなおかつ軽量なものです。
オープンソースでMITライセンスであるため、利用時に余計なことを気にする必要がありません。



2.アプリケーションの概要

今回のアプリケーションの特徴は以下の通りです。

  • Domino Voltのフォーム上でFullCalendarのカレンダービューを表示するようにしています。
  • カレンダーはタイプを切り替えることができます。
  • カレンダーにはDomino Voltで作成したデータを表示させることができます。
  • 自分が作成したデータのみが参照、更新可能(管理者は除く)。
  • データはカレンダーの日付をクリック、もしくはドラッグ&ドロップで作成できます。
  • カレンダーデータはJSON形式で利用します(JSONデータの生成はXPagesで行う)


3.アプリケーションの実行画面

下は実際にアプリケーションを動かした動画です。



4.実装方法1 -カレンダービューの表示-

  • FullCalendarのようなJavaScriptライブラリをDomino Voltで利用する場合、「Volt Configuration Settings」DBで「secureJS」を”FALSE”に設定する必要があります。
  • 「フォーム」にhtmlを定義します。

まず、FullCalendarで利用するcssを定義します。
次にFullCalendarを表示する領域を確保します。

HTMLパレットの内容
  • イベントを設定します。

「フォーム」のonLoadイベントにコードを記述します。
まず、FullCalendarの本体であるJavaScriptを定義します。
このとき、jsファイルは「https」のサイトにないといけません。
(2020/11/06 訂正)httpのサイトでも大丈夫でした。
続いて、このjsを利用するための関数を記述します。


var url = 'https://cdn.jsdelivr.net/npm/fullcalendar@5.3.1/main.min.js';

var array1 = new Array( url );
require( array1, function() {
  var myCalendar = document.getElementById('calendar');
  var option = {};
  var calendar = new FullCalendar.Calendar( myCalendar, option );
  calendar.render();
});

 

onLoadイベントのコード内容

require()は指定したJavaScriptライブラリが読み込まれたときに実行したいコードを引数のfunction()で記述します。
var calendar = new FullCalendar()でFullCalendarを設定して、calendar.render()で実際に表示しています。
これでカレンダービューを表示することが出来ます。
プレビューしたときの画面が下図です。

プレビュー画面

ただし、このままではカレンダーのタイプを変更することも出来ないし、データの入力や表示も出来ません。
そういった設定は
var option = {};
の値を連想配列としてオプション値を設定します。
例えば、画面上部にカレンダーのタイプを切り替えるボタンを追加したい場合は

var option = {
  headerToolbar: {
    left: 'dayGridMonth,timeGridWeek,timeGridDay'
  }
};

とします。
これで実行するとこのようになります。

ヘッダにカレンダータイプ変更アイコンを追加



5.実装方法2 -データフォームの作成-

次にカレンダービューに表示するデータの作成です。
これはVoltで通常通りフォームを作成します。カレンダービューとは別のアプリケーションとして作成しても構いませんが、今回は同一アプリケーションの別のフォームとして作成します。
フォームには「タイムスタンプ」を2つ、「単一行エントリー」「複数行エントリー」を配置します。

スケジュールフォームの作成


6.実装方法3 -カレンダービューとデータフォームの関連付け-

今度は、カレンダービューとデータフォームを関連付けて、カレンダーからデータの編集/表示が出来るようにします。
カレンダービューのvar option = {};に以下を追加します。

editable: true,
selectable: true,
selectMirror: true,
select: function( eventObj ) {
  var startDT = '&startDT=' + eventObj.start.toISOString();
  var endDT   = '&endDT=' + eventObj.end.toISOString();
  var url = app.getFormLaunchURL( ' F_ScheduleForm1' ) + startDT + endDT;
  window.open( url );
},
eventClick: function( eventObj ) {
  var url = app.getProductBaseURL() + '/landing/1/app/' + app.getUID() + '/launch/index.html?form=F_ScheduleForm1&id=' + eventObj.event.id;
  window.open( url );
},

既存のデータを表示する場合、optionに”events”というオプションを追加します。
ここはJSON形式でデータを設定しますが、REST APIを使うことも可能です。
このアプリケーションでは、XPagesのREST APIを使用するため、以下のように設定します。

events: {
  url: location.protocol + '//' + location.host + '/XPages/fullCalendarJSON.nsf/jsonData.xsp/calendarJSON'
},

このRETS APIはDomino Voltアプリケーションで作成されたDomino Databaseのビューの内容をJSON形式で出力するものにします(REST Service コントロールのviewJsonServiceを使っています)。
「databaseName」はDomino Voltアプリケーションのnsfファイル名をセットします。

上記のREST APIを実行したときのJSONのサンプルは下図です。

JSONのサンプル

これまでに書いたコードはこのようになります。

コード全体

これでアプリケーションをデプロイして完了です。

 

 7.備考

  • Domino Voltで外部のJavaScriptを利用する方法についての詳しい内容は、以下のURLを参照してください。
  • FullCalendarのその他のオプションについては以下のURLを参照してください。
  • 工夫すれば、全員のスケジュールデータを表示させたり、ユーザーごとにスケジュールデータの色を変更することもできたりします。
  • 実装方法は私が創意工夫して行ったものです。もっと簡単なもしくは効率的な方法があるかもしれません。あくまでも参考程度にとどめてください。


 

 それでは今日はこの辺で・・・

 

 

Notes/Dominoで困ったことがあれば、弊社にお問い合わせください。
HCL Ambassadorの私が承ります!
お問い合わせはこちらから→Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ 


コメント