Как я могу отобразить текст на весь день ячейки в полном календаре - PullRequest
0 голосов
/ 13 июня 2019

Я хочу отображать текст в каждой ячейке в полном календаре, но я всегда получаю этот длинный бар по умолчанию.кто-нибудь может знать, как это сделать?

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

});

1 Ответ

1 голос
/ 13 июня 2019

Вы, кажется, пытались использовать синтаксис для 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

...