Available only in PRO Edition
Эта функция доступна только в версии Scheduler PRO (Commercial с 6 октября 2021, Enterprise и Ultimate лицензии).
Изначально при работе с библиотекой вы могли заметить, что dhtmlxScheduler — это статический объект, то есть только один экземпляр dhtmlxScheduler может существовать на странице.
Однако в версии PRO это меняется: теперь несколько экземпляров dhtmlxScheduler могут сосуществовать на одной странице. По-прежнему доступен стандартный экземпляр планировщика через глобальный объект scheduler, но вы также можете создавать дополнительные объекты планировщика.
Чтобы создать новый экземпляр dhtmlxScheduler, используйте метод Scheduler.getSchedulerInstance():
// Обратите внимание, что 'Scheduler' начинается с заглавной буквы
const scheduler = Scheduler.getSchedulerInstance();
Этот метод может принимать объект конфигурации в качестве аргумента:
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" }
]
}
});
Объект конфигурации может включать следующие свойства:
const scheduler = Scheduler.getSchedulerInstance({
events: {
onEventCreated: function(id, e){
var task = scheduler.getEvent(id);
task.owner = null;
return true;
},
onClick: function(id, e){
alert(scheduler.getEvent(id).text);
return true;
}
}
});
Обратите внимание, что вызов Scheduler.getSchedulerInstance() без параметров возвращает объект планировщика с настройками по умолчанию. Вам все равно необходимо сконфигурировать, инициализировать и загрузить данные в новый экземпляр как обычно.
Вот простой пример с двумя планировщиками, расположенными друг под другом:
window.addEventListener("DOMContentLoaded", function(){
var scheduler1 = Scheduler.getSchedulerInstance();
scheduler1.init('scheduler_here',new Date(2019,5,30),"week");
scheduler1.load("/data/events");
var scheduler2 = Scheduler.getSchedulerInstance();
scheduler2.init('scheduler_here_2',new Date(2019,5,30),"month");
scheduler2.load("/data/events");
});
<body>
<div id="scheduler_here" style="width:100%; height: 50%;"></div>
<div id="scheduler_here_2" style="width:100%; height: 50%;"></div>
</body>
Начиная с версии 6.0, dhtmlxScheduler предоставляет destructor для удаления ненужных экземпляров Scheduler.
Вы можете использовать деструктор экземпляра планировщика следующим образом:
var myScheduler = Scheduler.getSchedulerInstance();
// уничтожить экземпляр планировщика
myScheduler.destructor();
Деструктор выполняет следующие действия:
Вот как можно использовать деструктор для очистки экземпляра планировщика при работе с Angular:
@Component({selector: 'app-scheduler', template: `...`})
class MySchedulerComponent implements OnDestroy {
ngOnInit() {
this.$gantt = Scheduler.getSchedulerInstance();
// настройка и инициализация
}
ngOnDestroy() {
this.$scheduler.destructor();
this.$scheduler = null;
}
}
Вызов деструктора dataProcessor очищает экземпляр и отсоединяет его от планировщика. Например:
var scheduler = Scheduler.getSchedulerInstance();
var dp = new scheduler.DataProcessor("url");
dp.init(scheduler);
// уничтожает dataProcessor и отсоединяет его от планировщика
dp.destructor();
Если вы используете пакет, который не поддерживает несколько экземпляров планировщика (например, GPL или Commercial издания), вызов деструктора планировщика сделает планировщик недоступным до перезагрузки страницы.