CODEWITHSUNDEEP
fullcalendar
kneidels
kneidels

Reputation: 914

fullCalendar adding a class to events

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

Upvotes: 7

Views: 39244

Answers (4)

Ravi Ram
Ravi Ram

Reputation: 24488

I was able to get it working with the following code:

eventRender: function (eventObj, $el) {
    $el.addClass(eventObj.ClassName);
},

eventObj.ClassName = "calendar-priority-warning"

Upvotes: 1

Roman Susi
Roman Susi

Reputation: 4199

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.

Upvotes: 9

Soyab Badi
Soyab Badi

Reputation: 400

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

Upvotes: 3

tocallaghan
tocallaghan

Reputation: 9532

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

Upvotes: 4

Related Questions