Premium support for our pure JavaScript UI components


Post by rocketreading »

Hi Animal/Alex,

Thanks, @Animal, that is resolved but still, I am not getting the hello in the console, as I have to call more sets of data. w.r.t to new start date and end date.

So, I am just testing out whether console is getting printed or not.

eventStore: new bryntum.scheduler.EventStore({
                pageSize: this.pageSize,
                data: this.events,
                autoload: true,
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json',
                        rootProperty: 'data'
                    },
                },
                loadDateRange({ startDate, endDate, changed }) {
                    // Load new data if user is requesting a different time window.
                    if (changed) {
                        console.log('hello');
                    }
                }
            }),
            

Post by Animal »

That is an event which needs to be in a listeners config block.

Stores do not have a proxy config. That property is not doing anything.

autoLoad also does nothing if you are providing a data block to the store.


Post by rocketreading »

Hi @Animal

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); } }

Post by Animal »

But it is an event of the EventStore, not the Scheduler. The listeners must be configured on the EventStore


Post by rocketreading »

Apologies for bugging you a lot. Thanks, Animal for all the support, event is getting triggered. But the startDate, endDate, and changed are undefined which is why I was not getting the console log.
Could you please explain that parameter too?

I believe whatever I am getting from apex:
So events are basically all the appointments with startDate and endDate is there.

But in that block it is undefined.


Post by alex.l »

Hi,

Do you have LWS disabled in you environment?

All the best,
Alex


Post by Animal »

The code snippet in the docs is incorrect. The actual docs are correct: https://bryntum.com/products/scheduler/docs/api/Scheduler/data/EventStore#event-loadDateRange

I will fix the snippet.


Post by rocketreading »

Yes, it is disabled Alex.

Didn't get you Animal, like anything I need to change?


Post by Animal »

We just made a mistake in the code snippet. Sorry about the bad guidance. It will look like this in the next version:

Screenshot 2023-03-22 at 10.52.39.png
Screenshot 2023-03-22 at 10.52.39.png (109.74 KiB) Viewed 151 times

The parameters block however in the actual documentation are correct and would have guided you:

Screenshot 2023-03-22 at 10.53.45.png
Screenshot 2023-03-22 at 10.53.45.png (55.4 KiB) Viewed 151 times

Post by rocketreading »

Np. I changed it the way it's there in the screenshot. Still, startDate, endDate, and changed are undefined.


Post Reply