Scheduler Events in timeline in Salesforce LWC

Scheduler
#1

Hi everyone,

I have a scheduler instance with a sections configured but cant seem to load data into events

    scheduler.createTimelineView({
        fit_events: true,
        name: "month_timeline",
        y_property: "machine",
        render: "bar",
        x_unit: "day",
        x_date: "%D %j",
        x_step: 1,
        x_size: 31,
        x_length: 7,
        dx: 155,
        dy: 120,
        event_dy: 'full',
        section_autoheight: false,
        full_event__dy: true,
        y_unit: this.machines
    });

tryed as dummy data:

scheduler.addEvent({
start_date: “14-07-2022”,
end_date: “16-07-2022”,
text: “Meeting”,
machine: “01t0C000002dTQKQA2” // user data
});

scheduler.addEvent({
start_date: “14-07-2022 09:00”,
end_date: “16-07-2022 12:00”,
text: “Meeting”,
machine: “01t0C000002dTQKQA2” // user data
});

scheduler.parse({events:[
{text:“Conference”, start_date:“17/07/2022 12:00”, end_date:“18/07/2022 21:00”,
machine:“01t0C000002dTQKQA2”},
{text:“Meeting”, start_date:“17/07/2022 09:00”, end_date:“17/07/2022 21:00”,
machine:“01t0C000002nub8QAA”},
{text:“Conference”, start_date:“18/07/2022 10:00”, end_date:“18/07/2022 15:00”,
machine:“01t0C000002nub8QAA”}
]});

but i can’t seem to see any event or i get a this.template.api_date is not a function alert.

Is there any type of example for event loading for timeline with sections ?
I’m not working with one event object in Salesforce DB as I require more than one object to be displayed so I need to wrap objects to same format and display on scheduler.

ThanksPreformatted text

#2

Hello,
If you want to create a custom property to the event, like in your case machine, you need to specify a new field while creating a custom object in Salesforce:
https://prnt.sc/apuPt5mPv1ZG ;
Also, you should add this field to your DataProcessor and unwrap function in scheduler.js and to your apex class in SchedulerData.cls files.
So the example of DataProcessor might look like:

scheduler.createDataProcessor(function (entity, action, data, id) {
    switch (action) {
        case "create":
            const insert = {
                apiName: "SchedulerEvent__c",
                fields: {
                    Name: data.info,
                    Start_Date__c: data.start_date,
                    End_Date__c: data.end_date,
                    Text__c: data.text,
                    Machine__C: data.machine
                }
            };
            scheduler.config.readonly = true; 
            return createRecord(insert).then((res) => {
                scheduler.config.readonly = false;
                return { tid: res.id, ...res };
            });
        case "update":
            const update = {
                fields: {
                    Id: id,
                    Name: data.info,
                    Start_Date__c: data.start_date,
                    End_Date__c: data.end_date,
                    Text__c: data.text,
                    Machine__C: data.machine
                }
            };
            return updateRecord(update).then(() => ({}));
        case "delete":
            return deleteRecord(id).then(() => ({}));
    }
});

but i can’t seem to see any event or i get a this.template.api_date is not a function alert.

I assume the error happens because scheduler.addEvent code is executed before scheduler.init call. scheduler.addEvent is expected to be called only after scheduler initialization, when all internal data stores and the display methods are ready.
Also, you need to convert all dates to the same format:
https://docs.dhtmlx.com/scheduler/date_formats.html ;

Is there any type of example for event loading for timeline with sections ?

To load events to certain sections in timeline view, you need to add special event’s property, which will be referred to a certain section. When you are configuring the scheduler.createTimelineView method, you need to specify y_property – (string) the name of a data property that will be used to assign events to certain sections. Then, you should set y_unit property – (array of objects) defines sections of the view, which must have key – (string) the section’s ID. This attribute is compared with the event’s data property to assign the event to a section.
Please check the example of how it might be implemented in your case:
https://snippet.dhtmlx.com/8lkpx3sj ;
And here is the demo with timeline view in Salesforce LWC:
https://files.dhtmlx.com/30d/fd6368aec7219cd5ddbd49137624afab/scheduler_timeline_salesforce.zip