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

这个答案适用于非常类似的情况，但是当选择事件类时，往返事件源可能会导致数据库中的持久性或检查。

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

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

想法是用户点击事件; ajax调用选择事件进入后端; onsuccess，前端javascript会$calendar.fullCalendar('rerenderEvents');并通过事件接收事件来源＆＃39;类。 .fc-event-container的直接子项获取指定的类，在上面的示例中为selected-event。

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

Answer 2

clientEvents返回匹配对象的数组。您需要遍历数组（在您的情况下为similarEvents）并为每个项目调用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

Answer 3

对于fullcalendar添加事件类，id和title请参见。

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

Answer 4

我能够通过以下代码使用它：

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

eventObj.ClassName = "calendar-priority-warning"

fullCalendar向事件添加一个类

4 个答案: