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

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/v4/dayRender

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

How can i display a Text on all cell day in Full calendar

javascript

jquery

fullcalendar

fullcalendar-4