Web Scheduler Library

Lesson 2: How to integrate it into your application

Integrating the Web Scheduler is fairly easy. Upon purchasing the library you’ll receive a .zip file with all the files you’ll need including the code used in this demonstration. Most notably are the DataFlex Library – which is a workspace file and the required JavaScript files.

Demonstration

First we're going to copy the JavaScript files to the project
Go to the WebDhtmlxScheduler folder
Open the Apphtml folder
Select the Custom and dhtmlx folders
Copy them into the Apphtml folder
Now we're adding a reference to these files in the index.html
Add code that came with the download
Next we're including the scheduler workspace as a library into our project
Open your project in DataFlex
Go to Tools
Go to Maintain Libraries
Click Add Library
Select the workspace file
Click OK

A useful thing to do is to add the Web Scheduler to the Class Palette. This will allow you to drag & drop it into your view.

Go to the Class Palette
Right click Web Controls
Select Add Class to Palette
Click on the three dots behind Package File
Go to the AppSrc of the WebDhtmlxScheduler folder and select the .pkg
Click OK
Now it shows at the bottom of the Class Palette
Drag & Drop it into the view
It already created some template code

The scheduler is very configurable, you can configure the view types to show, x- and y-axes, date range to display etc. For now we'll just copy and paste the configurations, all the properties are well documented, in the documentation you receive when purchasing the Web Scheduler Library.

We'll copy and paste a component. The main routine to implement here is the OnLoadEvents. This is the method that will dictate what data is shown in your scheduler. Now for demo purposes, we’ve fitted this workspace with a database that includes some data about reservations for conference rooms. We’ll be reading data from this table and feeding that into our scheduler. We've prepared the OnLoad code in advance and copy and paste this.

What you see in the code:

We're getting an array of event as a ByReference
This events array is filled with data from the table
Run through the reservations
While the reservation is within the start and end date we're going to get that information and put that in our event array
In the end these events will be send to our scheduler control

Now it looks like this:

We're currently in the Week view
All the data from the OnLoads events are inserted in the scheduler

The data is there, but we can't interact with it yet. For this several events need dto be added inside the scheduler. To interact with the Scheduler and manipulate the data, there are several methods that can be implemented. The most important ones here are

OnCreateEvent – This is called whenever we want to create a new event in the scheduler
OnEditEvent – Which is called whenever we double click an event to edit it
OnEventChange – Called whenever we move (drag & drop) an event inside the scheduler

What this does: whenever we click inside the scheduler, based on what we’re trying to do, one of these methods is called on the server, with the data of our event. Here we’ll pop up a dialog where we can enter some info for our event and store it in the database. Afterwards, we're going to add an OnCloseModelDialog. In this Dialog we're going to reload the scheduler, which will update it with the new data.

After compiling and refreshing the application, we can use the calendar. For example:

Clicking in the calendar, it shows a new event
Opening the event opens a reservation dialog. After saving it it's stored in the database and shows in the calendar.
Drag & Drop the event to another day/timeframe

This showed how to integrate the Web Scheduler Library into your application and some features of the Calendar. When purchasing the Library you will receive extensive documentation including the code used in this demonstration.

Try the free online demo to see the Web Scheduler in action. Log in with the credentions: demo, demo.

Web Scheduler Library

DataFlex courses

Information

Web Scheduler Library

Lesson 2: How to integrate it into your application