Plugin calendar - field id of MdbCalendarEvent overwriten


Topic: Plugin calendar - field id of MdbCalendarEvent overwriten

axiame_studio pro premium priority asked 10 months ago

Expected behavior When i initialized the list of events, i set value to the field id of the interface MdbCalendarEvent (UUID from our database). When i edit one event, i would have thought that the event received from the handler eventEdited should have the same id I provided.

Actual behavior Every time i edit an event in the calendar, a new id for the event is generated. It seems to ignore the initial id I provided in the list of events making it very hard to track change and reflect them in our database. Is there a way to enforce usage of the id we set in the interface MdbCalendarEvent? Or is there another way to get the edited item

Resources (screenshots, code snippets etc.)


Rafał Seifert commented 10 months ago

I confirm that we generate a new id on edit. It looks like a bug on our side and we will have to fix it. Unfortunately I do not see an easy workaround for now.


axiame_studio pro premium priority answered 10 months ago

Just if someone face the same issue, we implemented a workaround on our side.

We track all id of events. When we get an edit (eventEdited), we look for the id that is not present in calendar.events but present in the tracked list, this one is the original ID. Then we update the id in the list binded to the parameter [events] in a new copied array so this workaround can still work even if several edit are done on the same event.

//Every time we refresh the events (after update/add/initialization
// Events are stored in an attribute sourceEvents
private refreshBufferedEvents(): void {
    this.events = []; //The variable passed to mdb-calendar
    this.sourceEvents.forEach((event) => {
      const wEvent: MdbCalendarEvent = {
        id: event.id,
        startDate: event.startDate,
        endDate: event.endDate,
        eventStart: event.eventStart,
        eventEnd: event.eventEnd,
        longEvent: event.longEvent,
        allDay: event.allDay,
        oneDay: event.oneDay,
        summary: event.summary,
        description: event.description,
        color: {
          background: event.color.background,
          foreground: event.color.foreground,
        }
      }
      this.events.push(wEvent);
    });
    this.changeDetectorRef.detectChanges();
}



// To get the id of an edited event
const ids: Set<string> = new Set<string>();
this.sourceEvents.forEach((event) => {
  ids.add(event.id);
})
this.calendar_.events.forEach((event) => {
  ids.delete(event.id);
});
//Orginal id of edited event: ids[0]

Best regardsMichel


Rafał Seifert commented 10 months ago

I am glad you have found a workaround. We will look into this id problem and try to fix it in upcoming MDB Angular updates.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 6.0.0
  • Device: Computer
  • Browser: Chrome
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: No