To continue with this content, please log in with your Data Access ID or create a new account.
Cancel Data Access ID
You may not be authorized to see this content. Please contact Data Access Europe for more information.
Cancel Data Access Europe
You are not authorized to see this content.
Cancel Data Access Europe
Next lesson:

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.


  1. First we're going to copy the JavaScript files to the project
  2. Go to the WebDhtmlxScheduler folder
  3. Open the Apphtml folder
  4. Select the Custom and dhtmlx folders
  5. Copy them into the Apphtml folder
  6. Now we're adding a reference to these files in the index.html
  7. Add code that came with the download
  8. Next we're including the scheduler workspace as a library into our project
  9. Open your project in DataFlex
  10. Go to Tools
  11. Go to Maintain Libraries
  12. Click Add Library
  13. Select the workspace file
  14. 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.

  1. Go to the Class Palette
  2. Right click Web Controls
  3. Select Add Class to Palette
  4. Click on the three dots behind Package File
  5. Go to the AppSrc of the WebDhtmlxScheduler folder and select the .pkg
  6. Click OK
  7. Now it shows at the bottom of the Class Palette
  8. Drag & Drop it into the view
  9. 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.