Selecting an event id from fullcalendar

1
votes

Based on fullcalendar documentation, an event object can have an id to uniquely identify all instances of a particular event.

My question is: If I'm using eventClick to select a particular event, how can I automatically select all instances of that event on the calendar?

In other words, how can I change the properties(in this case background color) of the same event that is happening in different dates just by selecting one of them (this)?

My code looks something like this ('newColor' changes the background-color of the selected event):

eventClick: function(calEvent, jsEvent, view){ 
   $(this).toggleClass('newColor');
}

Right now, my code is only changing the color of the event selected (this).

4
jqueryfullcalendar
An id is a unique identifier. You can use class names instead to select events having same class – Khawer Zeshan
Thanks for your insight, however in the case of fullcalendar the id inside the calEvent is a value of the array and not an id of a div. – jcarlo

4 Answers

3
votes
eventClick: function(calEvent, jsEvent, view){ 
    $(this).toggleClass('newColor');
    console.log(calEvent); // "id" if it is set by the event object, will be here.
    console.log(this);  // is the div element that was clicked on
}

Event Object : Repeating events should have the same id.

eventClick : function( event, jsEvent, view ) { }

3
votes

When loading events to calendar, if the events have this structure like so:

events:[{
          id: myspecialid <----- If you provide the same id to the diferent events when 
                       you try do change/access event properties you will change 
                       for all of them that have same id.
          start:.....
          end: ....
          allDay: ....
          classname: <------If you want to change event css this is the propertie you have 
                  to use the same way the ID
         }]

EDIT

To select event properties, this is the example in Fullcalendar.

$('#calendar').fullCalendar({
eventClick: function(calEvent, jsEvent, view) {

    alert('Event id: ' + calEvent.id);
    alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
    alert('View: ' + view.name);

    // change the border color just for fun
    $(this).css('border-color', 'red');

 }
});
0
votes

See this.

This method can solve your problem.

$("#myCalendar").fullCalendar( 'clientEvents', evetnId );
0
votes

Perhaps a 2021 update is in order based on Fullcalendar 5.7, in case it has changed. Based on the documentation found here

The instantiation of the calendar as shown below shows the answer as it would apply to my solution.

    document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        eventClick: function(info) {
            console.log('Event id: ' + info.event.id);          
        }
    }
});