Not able to set ID for event in Angular on eventReceived event

Question

I am using fullcalendar module of Angular with drag and drop functionality. I want to set ID when the user drops new event on the calendar. But I don't know how I can set.

here is the Stackblitz URL. also below is the eventReceive function.

eventReceive(event) {
  const dataSet = event.draggedEl.dataset.event;
  const dataJson = JSON.parse(dataSet);
  const eventIndex: number = this.eventList.findIndex(d => d.id === dataJson.id);
  this.eventList.splice(eventIndex, 1);
  const isAllday = event.event.allDay;
  const endEventDate = event.event.end;
  const startEventDate = new Date(event.event.start);

  const EventTimeObject: any = {
    type: 'event',
    id: dataJson.id,
    start: startEventDate.toUTCString(),
    title: dataJson.title,
    color: dataJson.color
  };

  if (isAllday) {
    const endTime = new Date(startEventDate);
    const endTimeHour = endTime.setHours(23, 59, 59, 999);
    EventTimeObject.end = endTimeHour;
  }
  if (!isAllday && endEventDate === null) {
    const endTime = new Date(startEventDate);
    const endTimeHour = endTime.setHours(endTime.getHours() + 1);
    EventTimeObject.end = endTimeHour;
  } else if (endEventDate) {
    EventTimeObject.end = new Date(endEventDate).getTime();
  }

  this.eventsModel = [...this.eventsModel, EventTimeObject];

  console.log(this.eventsModel);
  // this.plannerService.addActionDates(EventTimeObject);
}

Answer 1

alright, I have figured it out, But I am not sure this is the right way to doit or not, the solution is need to add id in draggrable object

draggableEvent() {
 new Draggable(this.external.nativeElement, {
  itemSelector: '.fc-event',
  eventData(eventEl) {
    return {
      title: eventEl.innerText,
      id: eventEl.id
    };
  }
 });
}