Implemented a calendar view in Domino Volt

As I announced in "CollabSphere 2020 Live", I will be describing an application that implements FullCalendar in Domino Volt.

This application is implemented using FullCalendar.


1.About FullCalendar

FullCalendar is a JavaScript library for displaying a calendar view, which is versatile and yet lightweight, with the ability to change the calendar type (monthly, weekly, daily), change the locale, and edit data with drag and drop.
It's open source and MIT licensed, so you don't have to worry about anything extra when you use it.


2.Application Overview

The application features are as follows

  • It is displayed the calendar view on the Domino Volt form.
  • It can be switched the calendar type.
  • It can display data in the calendar that created by Domino Volt form.
  • Only the data you create can be viewed and updated.
  • It can create the data by clicking or dragging and dropping on the calendar.
  • It is used calendar data in JSON format(JSON data generation is done in XPages).


3.Application execution screen

Watch the video to see the application in action!


4.Step 1 -Display of Calendar View-

  • When using a JavaScript library like FullCalendar in Domino Volt, you can use in the Volt Configuration Settings DB, set secureJS to FALSE.
Volt Configuration Settings

  • Write html in the form.

At first, we define the css used in FullCalendar.
Next, allocate an area to display the FullCalendar.

 

HTML Palette's contents

  •  Write the code to the onLoad event of the "Form".

First, it defines the JavaScript for the body of FullCalendar.
At this time, the URL of the .js file must be "https://".
(Corrected Nov 6, 2020) It was OK to use http.
Next, it needs to write functions to use this .js file.


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();
});

Code content of the onLoad event

require() takes a code argument to run when the JavaScript library is loaded.
var calendar = new FullCalendar() sets up the FullCalendar, and calendar.render() actually displays it.
It can now display the calendar view.
The following figure shows the preview screen.

Calendar preview

However, you can't change the calendar type or enter or view data in this way.
Those settings are
var option = {};
The value of the option is set as an associative array.
For example, when displayed the button at the top of the screen to change the calendar type, write the following code.

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

 

The following figure shows the result of the execution.

Added a change to the calendar type in the header

 

5.Step 2 -Creating Data Forms-

Next, create the data form to be displayed in the calendar view.
Create the form as you normally would in Volt.
The form will have two "timestamps", a single line entry and a multi-line entry.


Creating a Schedule Form


6.Step 3 -Associate calendar views with data forms-

Next, associate the calendar view with the data form so that It can edit/view the data from the calendar.
Add the following to the calendar view's 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 );
},


If it wants to display the existing data, add the option "events" to the option.
It sets up the data in JSON format, but it can also use the REST API.
Since it is using the REST API of XPages, it sets it up as follows.



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


This RETS API makes the contents of a Domino Database view created by a Domino Volt application output in JSON format (using the viewJsonService of the REST Service control).
A sample JSON when executing the REST API is shown below.

JSON sample

The whole code looks like this

entire code

Now it can deploy this application.


7.Remarks


 

 

 That’s all. Thank you for reading.

 

 

 

 

 

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


コメント