0

I am using fullCalendar in a LWC as a budgeting tool. When events are dragged around the calendar and dropped I want to call a function that is a member of the extended LightningElement class of my LWC.

The function is updateSummaries()... it functions correctly when I manually call it through a refresh button. I cannot find a way to call it from the eventDrop callback provided by fullCalendar. The eventDrop callback handles a call to and APEX class to update some data in SalesForce and that works as expected.

The exact error is: "TypeError: this.updateSummaries is not a function"

I understand that updateSummaries is not a function of fullCalendar but of the LWC class, but I don't know how to the LWC class from the fullCalendar callback?

Current fullCalendar callback:

$(ele).fullCalendar({
....

eventDrop : function(info, jsEvent) {
    // APEX Call to save the result of the drop
    setAPEstimate({   
            recId : info.id, 
            epDate : moment(info.start._d).utc().format("YYYY-MM-DD")
    }).then(result=>{
        // Update the totals with the result of the drop
        this.updateSummaries();
    }).catch(result=>{
                    console.log(result);
            });
}

....
}

Any help would be greatly appreciated,

2
  • 1
    Try using an arrow function eventDrop: (info, jsEvent) => {...} to ensure that this is still bound to the LWC component.
    – Phil W
    Mar 24, 2022 at 22:02
  • Wow @PhilW, that was what I needed. Thank you so much! That worked perfectly. Mar 25, 2022 at 16:54

1 Answer 1

0

You need to use an arrow function for eventDrop to ensure that this remains bound as the LWC component:

eventDrop : (info, jsEvent) => {
    ...

If you use a function declaration the this gets rebound as the "global object", typically window, or is undefined depending on whether "strict mode" is enforced. See w3schools for a short explanation.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .