fullCalendar adding a class to events

Question

I am trying to select events on fullcalendar, based on user selection.

Example: if user selects class A, then all classes with the same ID should turn green (using applied className).

I am having trouble applying classes to the other events that I can successfully select by ID. I guess my issue is combining the event objects with jQuery objects.

sample code:

eventClick: function(event) {
  $(this).addClass("reg_selected");  //this works fine on selected event
  var selectedID = event.id
  alert(selectedID);                 //get event.ID, and use it to find similar ones.
  var similarEvents = $("#calendar").fullCalendar('clientEvents',selectedID).addClass("reg_selected");

the error I get is:

  addClass is not a function

I also tried this method of looping, and got the same error:

for (var i = 0; similarEvents.length > i ; i++){
    alert(similarEvents[i].title);
    similarEvents[i].className("reg_selected");
}

the alert() worked, but the className() generated the same error as above

Answer 1

This answer for a very similar situation, but when event classes are selected with round-trip to the event source for possible persistence in the db or checks.

Class name can be specified in the event object in the source as follows (start and end given for the context only):

[{
  ...
  "className": "selected-event",
  "start": '2017-05-01T08:30:00.0',
  "ends": '2017-05-01T09:00:00.0',
  ...
}, ...]

The idea is that user clicks the event; ajax call to select events goes to backend; onsuccess, frontend javascript does$calendar.fullCalendar('rerenderEvents'); and receives the event source with events' classes. The immediate child of .fc-event-container gets the specified class, in the example above - selected-event.

As a result, the selection can be persisted on the backend.

Answer 2

clientEvents returns an array of matching objects. You need to iterate through the array (in your case similarEvents) and call addClass for each item

Update: There is also issues using an id to update multiple events, using a filter function instead is a better way to go.

eventClick: function(event) {
    var similarEvents = $("#calendar").fullCalendar('clientEvents', function(e) { return e.test === event.test });

    for (var i = 0; similarEvents.length > i ; i++){
            similarEvents[i].className = 'reg_selected';
            $('#calendar').fullCalendar('updateEvent', similarEvents[i]);
        }
},

See jsfiddle