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);
}

Where do you want to set the ID? As I observe the log already record all object data. — Mukyuu, Nov 21 '19 at 06:25
@Mukyuu I want to set ID when event is drop i.e. eventReceived function, in above code when you retrieve ID when user resize or click on new event which was drop on calendar, it is not showing ID for that event. for example, try to drop any event in day view, and then resize that event. you ID is not showing in debugger, for more detaile code, check [Stackblitz](https://stackblitz.com/edit/github-eqcy38?file=src%2Fapp%2Fapp.component.html) — Chirag S Modi, Nov 21 '19 at 07:00

score 2 · Accepted Answer · answered Nov 21 '19 at 07:26

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
    };
  }
 });
}

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

1 Answers1