fullCalendar adding a class to events

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.

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

For fullcalendar add event class, id and title see this.

if($('#eventTitle').val() == "Avilable") {
   eventClass = "avilable";
}else {
   eventClass = "unavilable";
}

$myCalendar.fullCalendar('renderEvent', {
  id:response,
  title: title.val(),
  start: start.val(),
  end: end.val(),
  allDay: true,
  className: eventClass,
  color: color
  }, true
);