Question

基于fullcalendar文档，事件对象可以使用id来唯一标识特定事件的所有实例。

我的问题是：如果我使用eventClick选择特定事件，如何在日历上自动选择该事件的所有实例？

换句话说，如何通过选择其中一个（这个）来更改在不同日期发生的同一事件的属性（在本例中为背景颜色）？

我的代码看起来像这样（'newColor'更改所选事件的背景颜色）：

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

现在，我的代码只是改变所选事件的颜色（这个）。

Answer 1

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：重复事件应具有相同的ID。

eventClick：function（event，jsEvent，view）{}

Answer 2

将事件加载到日历时，如果事件具有如下结构：

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
         }]

修改

要选择事件属性，这是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'); } });

Answer 3

请参阅this。

此方法可以解决您的问题。

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

Answer 4

也许 2021 年的更新是根据 Fullcalendar 5.7 进行的，以防万一。基于文档 found here

如下所示的日历实例显示了适用于我的解决方案的答案。

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

从fullcalendar中选择一个事件ID

4 个答案: