Available only in PRO Edition

Creating Multiple Schedulers on a Page

This functionality is available in the Scheduler PRO version (Commercial (since October 6, 2021), Enterprise and Ultimate licenses) only.

As you have probably noticed at the very beginning of your work with the library, dhtmlxScheduler is a static object, i.e. only one instance of dhtmlxScheduler can exist on the page.

Now, for the PRO version, we should rephrase that statement and say: more than one instance of dhtmlxScheduler can exist on the page. You still have one default instance of scheduler, which can be accessed by the global scheduler object, but you can also create new scheduler objects.

Scheduler Instance Configuration

To create a new instance of dhtmlxScheduler, use the Scheduler.getSchedulerInstance() method:

// Beware, 'Scheduler' in the command goes with the capital letter
const scheduler = Scheduler.getSchedulerInstance();

The method can take a configuration object as a parameter:

const scheduler = Scheduler.getSchedulerInstance({
    plugins: {
        recurring: true,
    container: "scheduler_here",
    config: {
        hour_date: "%h:%i",
        details_on_create: true
    data: {
        events: [
            { id:1, start_date: "2022-04-18 09:00", end_date: "2022-04-18 12:00", 
                text:"English lesson", subject: 'english' },
            { id:2, start_date: "2022-04-20 10:00", end_date: "2022-04-21 16:00", 
                text:"Math exam", subject: 'math' },
            { id:3, start_date: "2022-04-21 10:00", end_date: "2022-04-21 14:00", 
                text:"Science lesson", subject: 'science' },
            { id:4, start_date: "2022-04-23 16:00", end_date: "2022-04-23 17:00", 
                text:"English lesson", subject: 'english' },
            { id:5, start_date: "2022-04-22 09:00", end_date: "2022-04-22 17:00", 
                text:"Usual event" }

The config object can contain the following properties:

  • container - (string|HTMLElement) an HTML container (or its id) that the Scheduler will be displayed in. If not specified, Scheduler will be initialized without a container.
  • config - (object) an object with configuration settings of the Scheduler
  • xy - (object) an object with sizes of the scheduler's elements
  • templates - (object) an object with templates
  • events - (object) an object with event handlers.
    You need to use the following format while specifying event handlers for a new instance of Scheduler:
const scheduler = Scheduler.getSchedulerInstance({
    events: {
        onEventCreated: function(id, e){
            var task = scheduler.getEvent(id);
            task.owner = null;
            return true;
        onClick: function(id, e){
            return true;
  • data - (object|string) an object with data to load or the URL to load data from
  • plugins - (object) extensions that need to be activated
  • locale - (string|object) a two-letter language code or an object of the locale that needs to be activated

Note, that calling the Scheduler.getSchedulerInstance() method without parameters will return the scheduler object with default configuration settings. Therefore, you need to configure your new instance, initialize it and populate with data, as usual.

Let's take a simple example: 2 schedulers, one under another:

window.addEventListener("DOMContentLoaded", function(){
    var scheduler1  = Scheduler.getSchedulerInstance();
    scheduler1.init('scheduler_here',new Date(2019,5,30),"week");
    var scheduler2 = Scheduler.getSchedulerInstance();
    scheduler2.init('scheduler_here_2',new Date(2019,5,30),"month");
    <div id="scheduler_here" style="width:100%; height: 50%;"></div>
    <div id="scheduler_here_2" style="width:100%; height: 50%;"></div>  

Destructor of Scheduler and DataProcessor instances

Starting from version 6.0, the dhtmlxScheduler object has a destructor that can be used to dispose unnecessary instances of the Scheduler.

The destructor of the scheduler instance can be used as follows:

var myScheduler = Scheduler.getSchedulerInstance();
//destroying a scheduler instance

The destructor will implement the following tasks:

  • clear the data loaded into a scheduler instance
  • destroy the dataProcessor (if it is attached to the scheduler)
  • detach the scheduler from DOM
  • detach all DOM events attached via the scheduler.event() method

Using destructor with Angular

Here is an example of using the destructor to dispose a scheduler instance while using the Angular framework:

@Component({selector: 'app-scheduler', template: `...`})
class MySchedulerComponent implements OnDestroy {
  ngOnInit() {
     this.$gantt = Scheduler.getSchedulerInstance();
     // configure and init
  ngOnDestroy() {
     this.$scheduler = null;

Detaching the dataProcessor

Calling the destructor of data processor will clear the dataProcessor instance and detach it from the scheduler. For example:

var scheduler = Scheduler.getSchedulerInstance();
var dp = new scheduler.DataProcessor("url");
// destroys data processor and detaches it from the scheduler

If you use a package that does not allow creating multiple instances of the scheduler object (GPL or Commercial editions), calling the scheduler destructor will make the scheduler inaccessible until page reload.

Related articles

Back to top