Calendar example

Introduction

In this article we'll see how to integrate a component into the RD3 graphics engine to show a calendar using Fullcalendar.
Attached you can also find the example project for the FLUID graphics engine.
We want to obtain this result:

Definition in the IDE

First of all, a client library called Full Calendar Lib was created in the project and its properties, methods, and events were defined:

The currentDate and viewType properties are used respectively to set the current date the calendar shows and the type of view (monthly, weekly, etc.) while the options property is used to configure the component.

The following events are defined:

• OnDateClick, raised when an empty calendar cell is clicked;
• OnEventClick, raised when a calendar event is clicked;
• OnEventDrop, raised when an event dragged using drag-and-drop is dropped on a calendar cell;
• OnChangeViewType, raised when the calendar view type changes, for example from monthly to weekly;
• OnChangeInterval, raised when the date range shown on the calendar changes, for example after setting the currentDate property;

Methods were also defined for managing calendar events:

• the AddEvent method is used to show a calendar event;
• the UpdateEvent method is used to change a calendar event;
• the RemoveEvent method is used to remove a calendar event;

Then a form was added to the application and the client library was dragged into it.
In the Load event of this form, the InitCalendar function is called, in which the component is initialized by setting the options property, and the initial view is selected by setting the viewType property.

Client-side wrapper class

The main.min.js and main.min.css libraries of the core, daygrid, and interaction modules downloaded from the reference site were copied in the custom directory. A JavaScript file, MyCalendar.js, containing the code of our wrapper class was also created.

Note: We have not modified the Desktop.htm and Desktop_sm.htm files because the MyCalendar.js file is loaded automatically, while the main.min.js and main.min.css files are loaded by the MyCalendar.js wrapper class when the form is opened.

The constructor in which the CustomElement class is extended has been defined in the JavaScript class. The options property was defined to intercept the property change by the server. In the setter, if the component has not yet been created, the value is saved in a temporary variable, this._options; otherwise the graphic component is updated immediately.

Loading the component JavaScript file

The Init method in which the JavaScript and CSS files of the Fullcalendar component are loaded has been defined.

The JavaScript files are interdependent: the main.min.js file of the core module must be loaded first. To respect the dependencies, the JavaScript files have been entered in an array that is then passed to the LoadRequirements function. This way, loading takes place in the order defined in the array.

The Init method is invoked immediately in order to load the component files as soon as possible (see call MyCalendar.Init();).

To make sure that the file is loaded just once, the static variable MyCalendar.inited was used. In fact, if there are multiple instances, they do not all need to load the JavaScript and CSS files.

Creating the component

The Realize method was defined, in which the element is built through the classes and methods of the "native" libraries of FullCalendar.
First, the HTML element that will contain the calendar is created.
Then the options are set, including the events that will trigger later upon interaction with the calendar.
Finally, the calendar object is created.

Finally, the methods for managing calendar events were defined.

The addEvent method is used to display a new event in the calendar, calling the native function of the component.
The removeEvent method makes it possible to remove a calendar event. First, the event to be removed is retrieved, and then the native function of the component is called.
The updateEvent method is used to change an event shown on the calendar. First, the event is retrieved, and then its properties are changed based on those present in the prop parameter passed to the method.

How to use the calendar in your project

The calendar created in this example can be imported into another project. To do so, complete the following operations:

• Open the FullCalendar project and the destination project
• Drag the Calendar View form from the FullCalendar project to the destination project.
  This operation will also bring the Event View form, the Event class, the FullCalendar Lib library, and the Events DM database into the project
• Unlink the Events class and its properties from the Events DB database by right clicking the class and the properties and selecting "Unlink from: Events Table" from the context menu
• Edit the Load Events method from the Calendar View to load events from your own data source. For each event, instances of the Event class must be created and inserted in the global Events variable.
• Delete the Events DB database
• Copy the custom directory of the project FullCalendar in your own project.
  N.B.: Because the custom directory is incorporated, the FullCalendar project must be compiled at least once to extract and then copy the custom directory into your project.