It's there in the Listeners config block too. Still, it's not getting called.
Attaching the complete code for your reference.
/* globals bryntum : true */
import { LightningElement, track, wire } from "lwc";
import { ShowToastEvent } from "lightning/platformShowToastEvent";
import { loadScript, loadStyle } from "lightning/platformResourceLoader";
import SCHEDULER from "@salesforce/resourceUrl/bryntum_scheduler";
import data from '@salesforce/apex/ByrntumData.data';
export default class Scheduler_component extends LightningElement {
@track resources = [];
@track events = [];
@track skills=[];
@track holidays=[];
startDate = new Date();
endDate = new Date();
items = [];
selectedMonths = 1;
currentPage = 1;
pageSize = 50;
schedulerElement;
scheduler;
skillvalue;
renderedCallback() {
if (!this.schedulerElement) {
this.schedulerElement = this.template.querySelector('.container');
this.getData(true);
}
}
connectedCallback() {
for (let i = 0; i < 12; i++) {
this.items[i] = i + 1;
}
}
async getData(initial) {
await loadScript(this, SCHEDULER + "/scheduler.lwc.module.js");
await loadStyle(this, SCHEDULER + "/scheduler.stockholm.css");
await data({ startDate: this.startDate, endDate: this.endDate,allData: true, skillId: this.skillvalue })
.then((response) => {
console.log(response);
this.resources = response.byrntumResource;
this.events = response.byrntumAppointment;
this.skills= response.skillSet;
this.holidays=response.holidaySet;
if (initial) {
console.log(this.events);
window.scheduler= new bryntum.scheduler.Scheduler({
readOnly: true,
tickSize: 150,
autoHeight: true,
infiniteScroll: true,
multiEventSelect : true,
appendTo : this.template.querySelector('.container'),
resources : this.resources,
events : this.events,
viewPreset : 'dayAndWeek',
rowHeight : 50,
barMargin : 5,
columns : [
{ text : 'Name', field : 'name', width : 130 }
],
startDate: new Date(),
endDate: new Date(new Date().getFullYear(), 11, 31),
features: {
eventEdit: {
readOnly: true,
editorConfig: {
title: 'Go to appointment'
},
items: {
nameField: { hidden: true },
resourceField: { hidden: true },
startDateField: { hidden: true },
startTimeField: { hidden: true },
endDateField: { hidden: true },
endTimeField: { hidden: true },
accountName: {
type: 'text',
label: 'Account',
name: 'accountName',
weight: 600,
hidden: true
},
description: {
type: 'text',
label: 'Description',
name: 'description',
weight: 700,
hidden: true
},
workTypeName: {
type: 'text',
label: 'Work Type Name',
name: 'workTypeName',
weight: 700,
hidden: true
},
lastModifiedBy: {
type: 'text',
label: 'Last Modified By',
name: 'lastModifiedBy',
weight: 800,
hidden: true
},
linkField: {
type: 'displayfield',
label: '',
name: 'id',
weight: 900,
template: link => `<a href='/${link}' target='blank'><b>Go to appointment</b></a></div>`
},
}
},
eventDrag: {
constrainDragToResource: true
},
eventTooltip: {
// Tooltip configs can be used here
align: 'l-r', // Align left to right,
// A custom HTML template
template: data => `<dl>
<dt><b>Account:</b></dt>
<dd>
${data.eventRecord.get('accountName') ? `${data.eventRecord.accountName}` : ''}
</dd>
</br>
<dt><b>Description:</b></dt>
<dd>
${data.eventRecord.get('description') ? `${data.eventRecord.description}` : ''}
</dd>
</br>
<dt><b>Work Type Name:</b></dt>
<dd>
${data.eventRecord.get('workTypeName') ? `${data.eventRecord.workTypeName}` : ''}
</dd>
</br>
<dt><b>Appointment Time:</b></dt>
<dd>
${bryntum.scheduler.DateHelper.format(data.eventRecord.startDate, 'LT')} - ${bryntum.scheduler.DateHelper.format(data.eventRecord.endDate, 'LT')}
</dd>
</br>
<dt><b>Last Modified By:</b></dt>
<dd>
${data.eventRecord.get('lastModifiedBy') ? `${data.eventRecord.lastModifiedBy}` : ''}
</dd>
${data.eventRecord.get('note') ? `<dt>Note:</dt><dd>${data.eventRecord.note}</dd>` : ''}
</dl>`
},
timeRanges: {
showCurrentTimeLine : true,
showHeaderElements : true,
enableResizing : true,
},
nonWorkingTime: true,
},
timeRanges:this.holidays,
appendTo: this.template.querySelector('.container'),
rowHeight: 30,
barMargin: 0,
resourceMargin: 1,
fillTicks: true,
columns: [
{
text: 'Service Resource',
width: 150,
field: 'name',
}
],
viewPreset: {
base: 'dayAndWeek',
displayDateFormat: 'YYYY-MM-DD',
timeResolution: {
unit: 'hour',
increment: 6
}
},
resourceStore: new bryntum.scheduler.ResourceStore({
pageSize: this.pageSize,
data: this.resources,
autoload: true,
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'data'
},
},
}),
eventStore: new bryntum.scheduler.EventStore({
pageSize: this.pageSize,
data: this.events,
loadDateRange({ startDate, endDate, changed }) {
// Load new data if user is requesting a different time window.
if (changed) {
console.log('hello');
}
}
}),
eventRenderer({ eventRecord, resourceRecord, renderData }) {
const bgColor = resourceRecord.bg || '';
if(eventRecord.data.accountName==='Pen Test Partners LLP'){
renderData.style = `background:#800080;border-color:${bgColor};color:${resourceRecord.textColor}`;
}
else{
renderData.style = `background:${bgColor};border-color:${bgColor};color:${resourceRecord.textColor}`;
}
renderData.iconCls.add('b-fa', `b-fa-${resourceRecord.icon}`);
return eventRecord.name;
},
tbar : {
items : {
scrollTo : {
label : 'Scroll to date',
inputWidth : '7em',
width : 'auto',
type : 'datefield',
value : this.startDate,
format : 'DD/MM/YYYY',
//disabled : true,
step : '1d',
listeners : {
change({userAction, value }) {
if (userAction) {
console.log(value);
scheduler.scrollToDate(bryntum.scheduler.DateHelper.set(value, 'hour',12), { block : 'center', animate : 500 });
}
}
},
highlightExternalChange : false
},
NormalDate : {
type : 'datefield',
label : 'Start date',
inputWidth : '8em',
value : this.startDate,
format : 'DD/MM/YYYY',
editable : true,
listeners : {
change : ({ value }) => this.setStartDate(value)
}
},
monthscheck : {
type : 'combo',
label : 'Select Months',
inputWidth : '8em',
value : this.selectedMonths,
multiSelect: false,
items: this.items,
editable : true,
listeners : {
change : ({ value }) => this.setEndDate2(value)
}
},
skillcheck :{
type : 'combo',
label : 'Skill Set',
inputWidth : '18em',
value : 'all',
displayField : 'name',
multiSelect: false,
items: [{ id : 'all', name : 'All unset' }].concat(this.skills),
editable : true,
listeners : {
change : ({ value }) => this.setSkills(value)
}
},
deletecheck : {
type : 'checkbox',
label : 'Delete',
inputWidth : '8em',
value : false,
//format : 'DD/MM/YYYY',
editable : true,
listeners : {
change : ({ value }) => this.setEndDate(value)
}
},
}
},
visibleDate : {
date : bryntum.scheduler.DateHelper.set(this.startDate, 'hour',12),
block : 'center'
},
listeners : {
horizontalScroll() {
// Keep scrollTo date synced with the visible date
this.widgetMap.scrollTo.value=bryntum.scheduler.DateHelper.floor(this.viewportCenterDate, '1 day');
},
loadDateRange({ startDate, endDate, changed }) {
console.log(changed);
if (changed) {
console.log('hello');
}
}
},
});
} else {
window.scheduler.resourceStore = new bryntum.scheduler.ResourceStore({
data: this.resources,
autoload:true
});
window.scheduler.eventStore = new bryntum.scheduler.EventStore({
data: this.events,
autoload:true
});
}
})
.catch((error) => {
console.log(error);
});
}
async getAllData(initial) {
console.log(this.skillvalue);
await data({ startDate: this.startDate, endDate: this.endDate,allData : initial,skillId: this.skillvalue })
.then((response) => {
console.log(response);
this.resources = response.byrntumResource;
this.events = response.byrntumAppointment;
this.skills= response.skillSet;
this.holidays=response.holidaySet;
this.events.concat(this.holidays);
window.scheduler.resourceStore = new bryntum.scheduler.ResourceStore({
data: this.resources,
autoload: true
});
window.scheduler.eventStore = new bryntum.scheduler.EventStore({
data: this.events,
autoload: true
});
this.holidays.forEach(holiday => {
window.scheduler.eventStore.add({
name: holiday.name,
tartDate: holiday.activitydate,
endDate: holiday.activitydate,
isHoliday: true,
cls: 'holiday-event' // Optional class for styling
});
});
console.log(window.scheduler.eventStore);
})
.catch((error) => {
console.log(error);
});
}
setStartDate(value){
console.log('hello');
console.log(value);
this.scheduler.setStartDate(value);
this.startDate= value;
this.endDate = new Date(this.endDate.setMonth(this.startDate.getMonth() + this.selectedMonths));
this.scheduler.setEndDate(this.endDate);
this.getData(false);
}
setEndDate(value){
console.log(value );
//this.skillvalue='All Unset';
value=!value;
this.getAllData(value);
}
setSkills(value){
console.log(value );
this.skillvalue=value;
console.log(this.skillvalue);
this.getData(false);
}
setEndDate2(value){
this.selectedMonths = value;
var newDate = new Date(this.endDate.setMonth(this.startDate.getMonth() + this.selectedMonths));
this.scheduler.setEndDate(this.endDate);
this.getData(false);
}
showErrorToast() {
const evt = new ShowToastEvent({
title: 'Error',
message: 'End Date should not be less than Start Date',
variant: 'error',
mode: 'dismissable'
});
this.dispatchEvent(evt);
}
}