在全日历时间线视图中向 header 添加自定义内容

Question

我正尝试在时间线视图中为每一天的 header 添加额外的内容

据此link:

https://github.com/fullcalendar/fullcalendar-scheduler/issues/311

它应该可以通过连接到 resourceRender 来实现。

但据我所知，以及到目前为止我所尝试的，我只能掌握它自己的资源，而不是每天 header。

我已经创建了一个 codepen 并连接到 resourceRender 来玩：https://codepen.io/thomasabcd/pen/YzzezoO

resourceRender: function(renderInfo){
  console.log(renderInfo.el);
},

有什么想法吗？

Answer 1

如果其他人遇到同样的问题，我通过连接到 datesRender 回调找到了解决方案。下面的代码进行检查并仅将额外的 HTML 添加到 resourceTimelineWeek。如果您不需要，请删除支票。

在此处查看 Codepen：https://codepen.io/thomasabcd/pen/jOOZYRm

datesRender: function(renderInfo) {
      let viewType = renderInfo.view.viewSpec.type;
      if (viewType == "resourceTimelineWeek") {
        let dateHeaders = renderInfo.el.querySelectorAll("th[data-date]");
        dateHeaders.forEach(element => {
          let headerDate = element.dataset.date;
          let headerText = element.querySelector(".fc-cell-text");
          let extraHTML = "<p>some text</p>";
          headerText.innerHTML = headerText.innerHTML + extraHTML;
        })
      }
    }

在全日历时间线视图中向 header 添加自定义内容

adding custom content to header in fullcalendar timeline view

fullcalendar