eventClick handler behaviour

Question

I use fullcalendar lib with Angular app. After upgrading from 4.X into latest 6.0.1 I observed different behaviour when getting the properties in the eventClick handler.

Suppose we have calendar configured as follows:

 events: [
      {
        title  : 'event',
        start  : '2023-01-08T12:30:00',
        end  : '2023-01-08T13:30:00',
        allDay : false // will make the time show
      }
    ],
    eventClick: (info)=>{
      console.log("event #1 :"+info.event.borderColor);
      info.event.setProp("borderColor",'red');
      console.log("event #2 :"+info.event.borderColor);
    },
    initialView: 'timeGridDay',
    plugins: [timeGridPlugin, interaction],
    views: this.viewsConfig,

  }

When I click on the event the border is set to red and the console log is as expected:

event #1 :
event #2 :red

but when I click the event again I get the same output:

event #1 :
event #2 :red

I was expecting to get

event #1 :red
event #2 :red

I believe it was working in the version 4.X.X - did anyone faced same issue?

My package.json

"@fullcalendar/angular": "^6.0.1",
    "@fullcalendar/core": "^6.0.1",
    "@fullcalendar/interaction": "^6.0.1",
    "@fullcalendar/timegrid": "^6.0.1",

Answer 1

Fix this code like this:

eventClick: (info) => {
  info.event.setProp("borderColor", "red");
  info.calendar.updateEvent(info.event);
  console.log("event #1: " + info.event.borderColor);
  console.log("event #2: " + info.event.borderColor);
}