Configuration options and templates

Configuration options and templates

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

Using JavaScript configuration with the scheduler

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

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

The component provides a rich client-side API that would help you to build the desired application. Be sure to check the client-side API reference and the coding guides that can be found here:

How to use .NET and JavaScript together?
There are 2 scenarios:

  1. To include the JavaScript code before initializing scheduler on the page. This may be needed if you use client-side code to configure initial appearance of the scheduler.
  2. To include the JavaScript code after initializing scheduler on the page. This is usually done when you add handlers for any user-invoked events such as 'onEventClick', 'onDblClick'.

Adding custom settings, plugins or styles to the page

To add a configurable JavaScript code and execute it before the scheduler renders on the page you should use the DHXScheduler.AfterInit property and add the desired JavaScript configurable function as in:

var scheduler = new DHXScheduler(this); //initializes dhtmlxScheduler
...
scheduler.BeforeInit.Add("configure();");

where configure() is a JavaScript configuration function defined in the related .aspx or .cshtml file:

<script>
    function config(){
        scheduler.attachEvent("onViewChange", function (mode , date){
            if(mode == "week" || mode == "month"){
                scheduler.config.readonly = true;
            }else{
                scheduler.config.readonly = false;
            }
       });
    }
</script>
<div style="height:100%; width: 100%;">
    @Html.Raw(Model.Scheduler.Render()) // scheduler renders on the page
</div>

Applying settings on scheduler initialization

  1. The most obvious way to execute a JavaScript code after the scheduler renders on the page is to add the script block directly to the view file (below the container with Scheduler):
    •  
      //ASP.NET
      <div style="height:509px; width: 100%;">
      	<%= this.Scheduler.Render()%> // scheduler renders on the page
      </div>	
      <script>
      	//your custom code
      </script>
    • //ASP.NET MVC with the Razor view engine
      <div style="height:100%; width: 100%;">
      	@Html.Raw(Model.Scheduler.Render()) // scheduler renders on the page
      </div> 
      <script>
      	//your custom code
      </script>
  2. The other way is to use the DHXScheduler.AfterInit property as in:
var scheduler = new DHXScheduler(this); //initializes dhtmlxScheduler
...
scheduler.AfterInit.Add("configure();");

where configure() is a JavaScript configuration function defined in the related .aspx or .cshtml file


comments powered by Disqus