In this document we'll explain how to integrate GxScheduler to use it within a WorkWithPlus instance.
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.
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:
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.
You should select the proper colours according to your Design System's colour pallet. To do this, just modify the following properties:
To create a more minimalist style, we suggest replacing the image databg_now.png located within the web folder ...Web\GXScheduler\imgs_flat. You should use this new image.
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;
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>";
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.