Question

我想在列表日视图中添加更多列。到目前为止，我发现实现此目标的唯一方法是在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>");
  }
});

修改：如果要为每个事件提供动态cols内容，则必须使用eventRender添加cols

添加更多列将使带有标题的行中断，因为这被设置为固定的列距。您可以在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);
   });

}

Answer 2

嗨，我尝试添加一列。会的但是，以与.fc-widget-header相同的方式向element.find('.fc-widget-header').after('<td class=\"fc-widget-header\" colspan=\"1\"></td>');添加一列。

全日历列表视图中的自定义列

2 个答案: