-1

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

$(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);

});

4

1 回答 1

1

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

但是，dayRender在 v4 中专门使用回调实际上与 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

于 2019-06-13T10:21:00.690 回答