fullCalendar向事件添加一个类

Question

我正在尝试根据用户选择在fullcalendar上选择事件.例如:如果用户选择A类 - 那么具有相同ID的所有类 - 都将变为绿色(使用应用的className).

我无法将类应用于我可以通过ID成功选择的其他事件.我想我的问题是将事件对象与jQuery对象组合在一起.

示例代码:

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

我得到的错误是:

  addClass is not a function

有任何想法吗？

谢谢!

编辑:我也尝试了这种循环方法,并得到了同样的错误:

for (var i = 0; similarEvents.length > i ; i++){
    alert(similarEvents[i].title);
    similarEvents[i].className("reg_selected");
}

alert()有效,但className()生成了与上面相同的错误

Answer 1

此答案非常类似的情况，但是当在往返于事件源时选择事件类以进行DB或Checks中可能的持久性。

可以在源中的事件对象中指定类名，如下所示（仅针对上下文给出开始和结束）：

[{
  ...
  "className": "selected-event",
  "start": '2017-05-01T08:30:00.0',
  "ends": '2017-05-01T09:00:00.0',
  ...
}, ...]

这个想法是用户点击事件；ajax 调用选择事件进入后端；onsuccess，前端 javascript 执行$calendar.fullCalendar('rerenderEvents');并接收带有事件类的事件源。的直接子级.fc-event-container获得指定的类，在上面的例子中 - selected-event。

因此，选择可以保留在后端。

Answer 2

clientEvents返回匹配对象的数组。您需要遍历数组（在您的情况下是 simpleEvents）并为每个项目调用 addClass

更新：使用 id 更新多个事件也存在问题，使用过滤器函数是更好的方法。

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

参见jsfiddle