Configuration Options and Templates

To achieve the desired look for the scheduler, the library provides 3 classes:

• DHXScheduler.Config - configuration options for dates, scale, controls, etc.
• DHXScheduler.Templates - formatting templates for dates and titles used in the scheduler, tooltips and styling
• DHXScheduler.XY - sizes of the elements

Common configuration is implemented with the help of the aforementioned classes.

But various complex behaviors require adding some configurations both on the server- and client sides. Usually, you'll need to define complex templates for scheduler elements, change some settings dynamically, or define handlers for client-side scenarios such as: 'click', 'double click', 'displayed view change', 'event saved', etc.

The component provides a rich client side that would help you to build the desired application. Check the client-side API reference and the coding guides.

How to use .NET and JavaScript together?

The core approach is simple: in addition to what can be done with declarative C# configs, you'll need to add some custom JS code and make sure it is called when scheduler instance is available on the page.

Adding js file as an extension of DHTMLX Scheduler

Add custom code as a self-invoking extension of DHTMLX Scheduler. Such script will be loaded to the page and executed after built-in extensions are executed and ready, but before initialization of scheduler.

For example, let's say you want to use something like dynamic loading, but want to enforce clear client-side cache. In that case, you'll have to re-implement dynamic loading manually, and here is how it can be done:

1 .Create Javascript file where you'll put the related logic /Scripts/scheduler.config.js:

// JS
(function(){
 
    //reload events for each date range
    scheduler.attachEvent("onBeforeViewChange", function (old_mode, old_date, mode, date) {
        var toStr = scheduler.date.date_to_str("%m/%d/%Y");
 
        var range = getDateRange(mode, date);
 
        //reload events each time displayed date range changes
        if (!old_date || old_date.valueOf() != date.valueOf() || old_mode != mode) {
            scheduler.clearAll();
            scheduler.load(app.data_url + "?from=" + encodeURIComponent(toStr(range.from)) + "&to=" + encodeURIComponent(toStr(range.to)), "json");
        }
        return true;
    });
 
 
    function getDateRange(mode, date) {
 
        var start = scheduler.date[mode + "_start"](new Date(date));
        var end = scheduler.date.add(start, 1, mode);
 
        return { from: start, to: end };
    }
 
})();

2 .Then add this file to DHXScheduler as an extension:

// C#
var scheduler = new DHXScheduler(this);
scheduler.Extensions.Add("../scheduler.config.js");//JS path relative to /Scripts/dhtmlxScheduler
...

As an alternative way of applying your js to Scheduler, you can enclose your config into a custom function that can be called at some point of scheduler initialization:

// JS
scheduler.customConfiguration = function(){
  scheduler.attachEvent("onEventSave",function(id,ev,is_new){
    if (!ev.text) {
        dhtmlx.alert("Text must not be empty");
        return false;
    }
 
    return true;
  });
};

3 . Call the js file from the server before scheduler is ready:

// C#
scheduler.Extensions.Add("../scheduler.config.js");
scheduler.BeforeInit.Add("scheduler.customConfiguration();");

or after scheduler is ready

// C#
scheduler.Extensions.Add("../scheduler.config.js");
scheduler.AfterInit.Add("scheduler.customConfiguration();");