Multiple schedulers on the page

Multiple schedulers on the page

 
This functionality included only in Scheduler PRO ( Enterprise license )

Initialization

The object constructor for Scheduler is the DHTMLX.Scheduler.DHXScheduler method.

In case of the Standard Version, the method has 2 overloads:

  1. DHXScheduler()
  2. DHXScheduler(Controller parent)
  • parent - the name of a controller that will handle data requests

By default, when Scheduler is rendered and initialized on the client, it creates an instance with the name 'scheduler' in the global scope(i.e. can be accessed as window.scheduler).
If you render several schedulers on the page, each next one will overwrite the global 'scheduler' object. As a result, only one instance of DHXScheduler can exist on the page.

In the PRO version the method was extended with 2 overloads that gives us 4 overloads in the total:

  1. DHXScheduler();
  2. DHXScheduler(Controller parent);
  3. DHXScheduler(string name);
  4. DHXScheduler(Controller parent, string name).

Parameters:

  • parent - the name of a controller that will handle data requests.
  • name - the name of the client-side dhtmlxScheduler instance ('scheduler' by default).

Now, using the 3rd or 4th overloads you can specify different names for instances and prevent their overwriting each other.

var sched1 = new DHXScheduler("scheduler1");
sched1.Config.multi_day = true;
 
var sched2 = new DHXScheduler("scheduler2");
sched2.InitialDate = new DateTime(2012, 9, 19);

The name of the DHXScheduler object can be get by using the string DHXScheduler.Name property. Note, the property is read-only and can't be used to set a new value for the instance name:

var sched = new DHXScheduler("scheduler1");
var name = sched1.Name; // -> 'scheduler1'

Drag events between multiple schedulers

You can allow users to drag-and-drop events from one scheduler to another. In order to do it, just enable SchedulerExtensions.Extension.DragBetween extension to the first scheduler on the page:

var scheduler = new DHXScheduler("scheduler1");
scheduler.Extensions.Add(SchedulerExtensions.Extension.DragBetween);
...
 
var scheduler = new DHXScheduler("scheduler2");

Adding extension to one of the schedulers will enable it for all schedulers on the page.

Managing D'n'D

Dragging event out of a certain scheduler can be disabled by DHXScheduler.Config.drag_out config:

var scheduler = new DHXScheduler("scheduler1");
scheduler.Extensions.Add(SchedulerExtensions.Extension.DragBetween);
scheduler.Config.drag_out = false;
...
 
var scheduler = new DHXScheduler("scheduler2");

Dragging event into the certain scheduler can be disabled by DHXScheduler.Config.drag_in config:

var scheduler = new DHXScheduler("scheduler1");
scheduler.Extensions.Add(SchedulerExtensions.Extension.DragBetween);
scheduler.Config.drag_in = false;
...
 
var scheduler = new DHXScheduler("scheduler2");

Disabling both settings will disable the extension for a specified scheduler. You can also manage Drag-and-Drop dynamically, using client-side API. Aforementioned configs can be enabled or disabled with the client-side code any time.

Related article on client-side component (note the API reference) are (here).


comments powered by Disqus