Calendar in Fullcalendar is not showing long events/holidays

Question

I am using fullcalendar plugin.

This is my code for fullcalendar:

$('#calendar').fullCalendar({
    timeZone        : 'Asia/Riyadh',
    header          : {
                        left: 'prev,next ',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay' // month,agendaWeek,agendaDay,listMonth
    },
    buttonText      : {
                        today: 'today',
                        month: 'month',
                        week : 'week',
                        day  : 'day'
    },
    themeSystem     : 'bootstrap4',
    //timeFormat      : 'H:mm',//(:mm)',
    weekNumbers     : false,
    navLinks        : true, // can click day/week names to navigate views
    editable        : true,
    eventLimit      : false, // allow "more" link when too many events
    //eventColor      : '#43BADE',
    //eventTextColor  : '#ffffff',
    events          : eventsData,
    eventRender     : function(event, element) {

                        element.find(".fc-title").html('<span style="font-size:16px;font-weight:bold;">' + event.title + '</span>');

                        var tooltipHtml = '<table>';

                            tooltipHtml += '<tr>';
                            tooltipHtml += '<td style="padding-bottom:5px;" colspan="2"><span style="font-size:14px;font-weight:bold; line-height:1.2;">' + event.full_title + '</span></td>';
                            tooltipHtml += '</tr>';

                            tooltipHtml += '<tr>';
                            tooltipHtml += '<td style="font-size:13px;font-weight:600; padding-top:3px; padding-bottom:5px;">Start:</td><td style="font-size:13px;">' + formatDate(event.start, 'dd-mm-YYYY') + '</td>';
                            tooltipHtml += '</tr>';

                            if(event.end != null)
                            {
                              tooltipHtml += '<tr>';
                              tooltipHtml += '<td style="font-size:13px;font-weight:600; padding-top:3px; padding-bottom:5px;">End:</td><td style="font-size:13px;">' + formatDate(event.end, 'dd-mm-YYYY') + '</td>';
                              tooltipHtml += '</tr>';
                            }

                            tooltipHtml += '</table>';

                        element.qtip({  //show event description at qtip. qtip Plugin Location  : (plugins/fullcalender/)
                          content : tooltipHtml,
                          show    : {
                              event: 'click',
                              solo: true
                          },
                          hide: {
                              event: 'click unfocus'
                          }
                        });
    },
    viewRender       : function () {
                        var month = $("#calendar").fullCalendar('getDate').month()+1;
                        if (month<10) 
                        {
                            selectedMonth = 0+''+month;
                        } else{
                            selectedMonth = month;
                        }
                        var currentMonth = $("#calendar").fullCalendar('getDate').year()+'-'+selectedMonth;
                        //sessionList(currentMonth); //month wise session list
    },
    select          : function(start, end) {
                        if(start.isBefore(moment())) {
                            
                        }
    },
    dayClick: function (date, jsEvent, view) {
    }
  });

This is my code of how I am building up the events array which contains holidays:-

for(var event = 0; event < data.data.length; event++)
{   
  if(data.data[event].end == null)
  {
    strDateObj  = new Date(data.data[event].start);
    eventsData.push({
            title           : (data.data[event].title !== '' && data.data[event].title !== null) ? ((data.data[event].title.length > 25) ? data.data[event].title.substring(0, 25) + '...' : data.data[event].title) : 'N/A',
            //title           : data.data[event].title,
            full_title      : data.data[event].title,
            start           : strDateObj,
            startStr        : strDateObj.toISOString(),
            allDay          : true,
            backgroundColor : '#f56954', //red
            borderColor     : '#f56954' //red
        });
  }
  else
  {
    strDateObj  = new Date(data.data[event].start);
    endDateObj  = new Date(data.data[event].end);
    eventsData.push({
            title           : (data.data[event].title !== '' && data.data[event].title !== null) ? ((data.data[event].title.length > 25) ? data.data[event].title.substring(0, 25) + '...' : data.data[event].title) : 'N/A',
            //title           : data.data[event].title,
            full_title      : data.data[event].title,
            start           : strDateObj,
            startStr        : strDateObj.toISOString(),
            end             : endDateObj,
            endStr          : endDateObj.toISOString(),
            allDay          : true,
            backgroundColor : '#f56954', //red
            borderColor     : '#f56954' //red
        });
  }
}

I have a holiday called Eid Holiday which is starting on 29th March, 2022 and ending on 30th March, 2022.

But in the calendar view, only 29th March is showing the Eid Holiday event while 30th March is blank.

Why is this happening? How can I show Eid Holiday as a long Holiday extended on 30th March too?

Answer 1

For multi-day allday: true events, we have to add a day on to the end date to get them to show in our calendar.

So in your else block, try:

end: endDateObj.setDate(endDateObj.getDate() + 1)

For your tooltip to stay correct, add a new property endOriginal when you build your events data

eventsData.push({
    ...
    endOriginal: endDateObj,
    ...
});

Then change your tooltip builder to use that

/* FullCalendar v5 */
if(event.extendedProps.endOriginal != null) {
  tooltipHtml += '<tr>';
  tooltipHtml += '<td style="font-size:13px;font-weight:600; padding-top:3px; padding-bottom:5px;">End:</td><td style="font-size:13px;">' + formatDate(event.extendedProps.endOriginal, 'dd-mm-YYYY') + '</td>';
  tooltipHtml += '</tr>';
}

/* or */

/* FullCalendar v3 */
if(event.endOriginal != null) {
  tooltipHtml += '<tr>';
  tooltipHtml += '<td style="font-size:13px;font-weight:600; padding-top:3px; padding-bottom:5px;">End:</td><td style="font-size:13px;">' + formatDate(event.endOriginal, 'dd-mm-YYYY') + '</td>';
  tooltipHtml += '</tr>';
}