6

我正在尝试根据用户选择在全日历上选择事件。

示例：如果用户选择 A 类，则具有相同 ID 的所有类都应变为绿色（使用应用的类名）。

我无法将类应用于可以按 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() 产生与上述相同的错误

4

4 回答 4

8

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

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

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

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

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

于 2017-05-04T05:58:28.337 回答
4

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

于 2013-03-19T23:46:22.497 回答
3

对于 fullcalendar 添加事件类、id 和标题，请参阅此。

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
);
于 2016-06-16T05:37:44.350 回答
1

我能够使用以下代码使其工作：

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

eventObj.ClassName ="calendar-priority-warning"

于 2018-08-13T16:54:02.443 回答