Download Free Demos

Available only in PRO Edition

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, which gives us 4 overloads in 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 of 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 for 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 Drag-n-Drop

Dragging event out of a certain scheduler can be disabled by the 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 a certain scheduler can be disabled by the 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 the client-side API. Aforementioned configs can be enabled or disabled with the client-side code any time.

See the related article on client-side component. Pay attention to the list of API Events at the very end.

Was this article helpful?

Yes No