Search code examples
fullcalendarfullcalendar-4

How to change resource(s) of events


The handling of resource changed in FullCalender 4.0.

In FullCalendar 3.x I changed the resource of an event using:

event.resourceId = newResourceId;

In FullCalendar 4.0 I cannot find the right way... My current code is:

var calendar_event = calendar.getEventById(data.event.id)
if (calendar_event) {
  calendar_event.setProp('title', data.event.title)
  calendar_event.setProp('resourceIds', [data.event.resourceId])
}

setProp seems to be not the correct method as afterwards the event does not reflect the change within the grid, only the title has been changed to the new one.

A setter to getResources(), e.g. setResources() does not exist.

The official documentation on https://fullcalendar.io/docs/resource-data only includes resource-fetching, not programmatically set a new one to an existing event.

The migration guide https://fullcalendar.io/docs/upgrading-from-v3 mentions only the methods setProp, setExtendedProp, setStart, setEnd, setDates, setAllDay, moveStart, moveEnd, moveDates to replace updateEvent - resources are missing.

My current workaround is to delete and add the event again:

calendar.getEventById(data.event.id).remove()
calendar.addEvent(data.event)

How to move an event to another resource without loading and initializing the whole event a second time?


Solution

  • Editing resources of an event has been added in version 4.0.2.

    The documentation describes the usage as follows:

    By ID:

    var event = calendar.getEventById('1');
    event.setResources([ 'a' ]); // set a single resource
    event.setResources([ 'a', 'b' ]); // set multiple
    

    By Resource:

    var resourceA = calendar.getResourceById('a');
    var resourceB = calendar.getResourceById('b');
    
    var event = calendar.getEventById('1');
    event.setResources([ resourceA, resourceB ]);