How to use GxScheduler with WorkWithPlus

In this document we'll explain how to integrate GxScheduler to use it within a WorkWithPlus instance. 

Installation

To install GxScheduler you can do it from the GeneXus's Start Page, by looking for it in the Marketplace section. When selecting it, and pressing "Update", the following dialog is shown:

By installing it, some sample objects are automatically imported in your KB, under the folder Scheduler.

Integrate it with WorkWithPlus for Web

To use the control within a WorkWithPlus instance, you only need to add a "User Control" node and customize the properties that you want to change:

Customizing GxScheduler

1 - Change the style

The GxScheduler by default, uses the "Classic" style, but we suggest using the "Flat" as it has a more attractive look&feel that matches better the Design Systems provided by WorkWithPlus.

Tip: you can try different styles besides the "Flat" to look for the one that adapts better to your needs.

2 - Customize colours

You should select the proper colours according to your Design System's colour pallet. To do this, just modify the following properties:

3 - Replace image

To create a more minimalist style, we propose replacing the image databg_now.png located within the web folder ...Web\GXScheduler\imgs_flat. You should use this new image.

4 - Customize the look&feel

We suggest modifying some classes to get a better look&feel. In particular, you should create the following classes in your Theme object:

• dhx_cal_event .dhx_body,.dhx_cal_event_line --> Custom Properties: text-align: center !important;
• dhx_scale_m  --> Custom Properties: line-height: normal !important; vertical-align: inherit !important; 
• dhx_scale_h  --> Custom Properties: font-size: 11px !important;

For example:

Tip: you can go on with more advanced customizations. For example, to change the format in which the date times are shown, you should modify the dhtmlxscheduler.js and modify the following line:

 var i = "<span class='dhx_scale_h'>" + e.getHours() + "</span><span class='dhx_scale_m'>:" + t + "</span>";

Try it

To try the GxScheduler you should run the panel. By doing the previous customizations, you'll visualize it as follows:

Then, you should add your business logic to the scheduler, you can find how to do it here.

0 Votos