CODEWITHSUNDEEP
javascriptfullcalendarfullcalendar-schedulerfullcalendar-4
nurovek
nurovek

Reputation: 87

Using FullCalendar, how to add information to EventObject when eventReceive?

I've started discovering and using FullCalendar but I'm stuck with it.

What I want to do is a ResourceTimeline in Month view, with external event dragging (a left panel).

The subject later would be to have a modal when you drop an event, in order to choose if you want the event to be from 8am to 12pm, or afternoon from 12pm to 6pm.

So first, I'd like to do a simple eventReceive without modal, to see if I can update the event when it's dropped.

But it seems I can't, what do I do wrong ?

From what I can understand, it looks like when you drop an event in month view, the event in the param sent to eventReceive is modified.

eventReceive(info) {
  info.event.start = moment(info.event.start).add(8, 'hours').format('YYYY-MM-DD hh:mm:ss');
  // var c = confirm('OK = morning, Cancel = aprem');
  // if (c) {
  //   console.log("morning !")
  // } else {
  //   console.log("afternoon !")
  // }
}

Events are very basic because I wanted to complete them whenever I drop them into the calendar

new Draggable(listofEvents, {
  itemSelector: '.draggable',
  eventData(event) {
    return {
      title: event.innerText,
      activite: event.dataset.activite,
      allDayDefault: false,
    }
  },
})

I even tried to force allDayDefault to false but it doesn't change a thing...

Here is the codepen of the project in its current state : https://codepen.io/nurovek/pen/zYYWGyX?editors=1000

Sorry if my post lacks information, I'm not used to ask questions on SO. If it's lacking, I'll try to be more explicit if you ask me, of course !

Upvotes: 2

Views: 123

Answers (1)

ADyson
ADyson

Reputation: 61784

As per the documentation, an event's public properties (such as "start", "end", title" etc) are read-only. Therefore to alter a property after the event is created you must run one of the "set" methods.

So your idea will work if you use the setDates method:

eventReceive(info) {
  info.event.setDates(moment(info.event.start).add(8, 'hours').toDate(), info.event.end, { "allDay": false } )
  console.log(info.event);
}

Demo: https://codepen.io/ADyson82/pen/dyymawy?editors=1000

P.S. You might notice I also made a few other little changes to your CodePen, mainly to correct all the links to CSS and JS files, since it was generating all sorts of console errors. These errors were because links were wrong or simply referred to something non-existent, and for some reason you were also using files from two different versions of fullCalendar (4.3.0 and 4.3.1), which is never a good idea if you want to ensure full compatibility.

Upvotes: 2

Related Questions