fullcalendar - 全日历 ListView 中的自定义列

Question

我想在列表日 View 中添加更多列。到目前为止，我发现实现此目的的唯一方法是在 eventRender 函数中手动添加列。

像这样:

$('#calendar').fullCalendar({
  defaultView: 'listDay',  
  eventRender: function (event, element, view) {
    element.find(".fc-list-item-time").after("<td>Extra column 1 here</td>");
    element.find(".fc-list-item-time").after("<td>Extra column 2 here</td>");
    element.find(".fc-list-item-time").after("<td>Etc</td>");
  }
});

是否有更好的方法来实现更多列？

(我确实在 github 上找到了相关的功能请求并投了赞成票。)

Answer 1

我会在 viewRender 中这样做功能。

$('#calendar').fullCalendar({
  defaultView: 'listDay',  
  viewRender: function (view, element) {
    element.find(".fc-list-item-time").after("<td>Extra column 1 here</td>");
    element.find(".fc-list-item-time").after("<td>Extra column 2 here</td>");
    element.find(".fc-list-item-time").after("<td>Etc</td>");
  }
});

编辑:如果您想为每个事件都添加动态列内容，则必须使用 eventRender 添加列

添加更多的列将打破带有标题的行，因为它被设置为固定的列跨度。您可以在 eventRender 中添加 cols，然后在 viewRender 中，计算这些 cols 并将标题行的 colspan 设置为其。

  viewRender: function(view, element){
   var cols = element.find('.fc-list-item')[0].children.length;

   $.each(element.find('.fc-widget-header'),function(){ 
    $(this).attr('colspan',cols);
   });

}