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

Question

I want to display a text on every cell in full calendar but im always getting that long bar by default. can anyone know how to do that?

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

You seem to have tried to use the syntax for fullCalendar v3 instead of v4. This will never work, since they are implemented very differently.

However, using the dayRender callback specifically in v4 is actually quite similar to v3, but the main differences are that you receive one object as input to the function, which then contains other objects representing the date, the HTML element to modify, and the current view. And the HTML element is a native DOM element object, not a jQuery object (since v4 no longer needs or uses jQuery).

This should work for you:

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>');
    }
});  

Documentation: https://fullcalendar.io/docs/v4/dayRender