我如何在完整日历的所有单元格中显示文本

Question

我想在完整日历的每个单元格上显示一个文本，但是默认情况下，我总是会得到该长条。 有人知道怎么做吗？

$(document).ready(function(){

var calendarEl = document.getElementById('calendarOutput');

var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth'
        },
        displayEventTime:false,
        navLinks: true, // can click day/week names to navigate views
        selectable: true,
        eventLimit: true, // allow "more" link when too many events
        eventSources:[
           {
           url:'http://localhost/servrevo_web/booking/getDate',
           allDayDefault: 'true',
           color: '#02a3bd',  
           textColor: 'black'
           },
           {
           url:'http://localhost/servrevo_web/booking/getBooking',
           color: '#87a900',  
           textColor: 'black'
           }
           ] 

        });  
        opts.dayRender= function(date, cell) {
        cell.append('<i class="fc-content" aria-hidden="true">Hello</i>');   
        }
     $('#calendarEl').fullCalendar(opts);

}）;

Answer 1

您似乎已尝试对fullCalendar v3而不是v4使用语法。 这将永远无法工作，因为它们的实现方式非常不同。

但是，实际上在v4中使用dayRender回调实际上与v3非常相似，但是主要区别是您收到一个对象作为函数的输入，然后该对象包含表示日期，要修改的HTML元素和当前对象的其他对象。视图。 HTML元素是本机DOM元素对象，而不是jQuery对象（因为v4不再需要或使用jQuery）。

这应该为您工作：

var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
    /*.... then all your other options, and then....*/
    dayRender: function(dayRenderInfo) {
      dayRenderInfo.el.insertAdjacentHTML('beforeend', '<i class="fc-content" aria-hidden="true">Hello</i>');
    }
});  

文档： https : //fullcalendar.io/docs/dayRender