In jQuery Fullcalendar listMonths view, how to display all dates with events and no events

Question

I have Fullcalendar working nicely in listMonth view, but I'd also like to list all dates with events, and no events.

Here is my current calendar:

I'm also hoping date 06-June and 07-June (with no events) to be appeared in the list.

    <script>


      $(document).ready(function() {

      var fcSources = {
        loadEvents: {
            url: '<?php echo $urlCU; ?>',
            type: "GET",
            color: "#65a9d7",
            textColor: "#3c3d3d",
            className: "events", 
            data:
            {
                 start: "start",
                 end: "end",
                 id: "id",
                 title: "title"

            },
            error: function() {
                console.log("Error in loadEvents: " + data);
            },
        },
        loadEwsEvents: {
            url:  '<?php echo $url; ?>' ,
            type: "GET",
            color: "#FF6347",
            textColor: "#000000",
            editable: true,
            disableDragging: true,
            className: "events",
            data:  {
                start: "start",
                end: "end",
                id: "id",
                title: "title"
            },
            error: function() {
                console.log("Error in loadEWSEvents: " + data);
            },
        }
    };

       var calendar = $('#calendar').fullCalendar({

        aspectRatio: 2,
        timeFormat: 'h(:mm)a', 
        header:{
         left:'prev,next today',
         center:'title',
         //right:'month,agendaWeek,agendaDay,listMonth'
         right:'month,agendaWeek,listMonth'
        },
        eventSources: [
        fcSources.loadEvents,
        fcSources.loadEwsEvents
        ],
        validRange: {
            start: '<?php echo $startYr; ?>',//start date here
            end: '<?php echo $endYr; ?>' //end date here
        },

        views: {
            agendaWeek: {
                columnHeaderHtml: function(mom) {
                    return '<span>' + mom.format('ddd') + '</span>' + '<span>' + mom.format('DD') + '</span>';
                }
            },
            listMonth: {
                listDayFormat: 'ddd DD',
                listDayAltFormat: false
            },
            listWeek: {
                listDayFormat: 'ddd DD',
                listDayAltFormat: false
            }
        },

        eventAfterAllRender: function(view) {
        if (view.name === 'listMonth' || view.name === 'listWeek') {
            var dates = view.el.find('.fc-list-heading-main');
            dates.each(function() {
                var text = $(this).text().split(' ');
                var now = moment().format('DD');
                $(this).html(text[0] + '<span>' + text[1] + '</span>');
                if (now === text[1]) {
                    $(this).addClass('now');
                }
            });
        }
        console.log(view.el);
    },
    eventRender: function(event, element) {
        element.find('.fc-title, .fc-list-item-title').html(event.title);
        if (event.description) {
            element.find('.fc-list-item-title').append('<span class="fc-desc">' + event.description + '</span>');
            element.find('.fc-content').append('<span class="fc-desc">' + event.description + '</span>');
        }
        var eBorderColor = (event.source.borderColor) ? event.source.borderColor : event.borderColor;
        element.find('.fc-list-item-time').css({
            color: eBorderColor,
            borderColor: eBorderColor
        });
        element.find('.fc-list-item-title').css({
            borderColor: eBorderColor
        });
        element.css('borderLeftColor', eBorderColor);
    },
       });




      });

available view in listMonth seems to only displayed that date has events, but I need the date with no events to be appeared too.

Anyone can help me on this?

Many thanks for any help