在全日历时间轴视图中向标题添加自定义内容

时间:2019-11-03 21:02:25

标签: fullcalendar

我正在尝试在时间轴视图中每天为标题添加其他内容

根据此链接:

  

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

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

但是据我所知以及到目前为止我已经尝试过的,我只能获得它自己的资源,而不能每天获得标头。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="messageInput" />
<span id="messageOutput"></span>

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

如果其他人也遇到相同的问题,我通过挂在datesRender-callback中找到了解决方案。下面的代码进行检查,仅将其他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;
        })
      }
    }