FullCalendar, 4.2 - How to change event class on eventClick function

Question

I'm trying to change the event's CSS class when the event is clicked, but I'm having zero luck. Here's my JS:

var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'dayGrid', 'timeGrid', 'list' ],
        header: {
            left: 'prevYear,prev,next,nextYear',
            center: 'title',
            right: 'today dayGridMonth,timeGridWeek,timeGridDay,listWeek'
         },
         defaultView: 'dayGridMonth',
         eventLimit: true,
          views: {
             month: {
                eventLimit: 2 
             }
         },     
        eventClick:function(info){          
            var id = info.event.extendedProps.timeslotid;
            $.ajax({
                url: 'index.php?option=com_cases&task=shifts.timeslotform&id='+id,
                type: 'post',
                dataType: 'html',
                async: true,
                success: function(response){
                    if (response) {
                        info.setProp( 'classNames', 'selected' ); // here's where the issue is
                        $('#sbcontent').empty();
                        $('#sbcontent').append(response);
                    }                           
                }
            });
        },
        events: 'index.php?option=com_cases&task=shifts.buildevents',
        eventTimeFormat: { // like '14:30:00'
            hour: 'numeric',
            minute: '2-digit',
            hour12: true
        }
    });

    calendar.render();

I've tried the following, but all result in a JS error similar to: "Uncaught TypeError: info.setProp is not a function".

1) info.setProp( 'classNames', 'selected' );
2) info.el.setProp( 'classNames', 'selected' );
3) $(this).setProp( 'classNames', 'selected' );
4) $(this).addClass("selected");

I've found one similar post, but the accepted answer didn't add or change the class. Instead they just settled for changing the background color of the event. I don't want to do that though. I'd rather add a CSS class to the event.

Similar Post: FullCalendar, how to change event class on eventClick function

Any help appreciated!

Rodrigo Medeiros Rodrigo Medeiros · Accepted Answer · 2020-02-17T14:12:33

info.event is the reference to the Event. So you have to do info.event.setProp('yourProp', 'yourValue). Just remember that the classNames attribute is an array, and not a string.

FullCalendar, 4.2 - How to change event class on eventClick function

1 Answers