FullCalendar JS (Add event when there's no event)

Question

I'm trying to find a way to put an event when there's no even on that specific date.

So example:

I have rendered my Calendar but there's 2 days that doesn't have an event. So on those day I want to put add an event that says "Closed". I have tried multiple thing but can't find a way that works....

This is my code for now:

$('#calendar').fullCalendar({
        editable: false,
        events: event,
        firstDay: 1,
        eventRender: function (event, element, view) {
            $(element).tooltip({ title: event.description });
            $(element).each(function () { $(this).addClass('dateClass-' + event.start.date().toString()); $(this).attr('date-num', event.start.date().toString()); });
            if (view.name == "month") {

                console.info("DATE: " + event.start.date().toString());

                /*$('.fc-month-view').find('.fc-day-number').each(function () {
                    CellDates.push($(this).text());
                    if ($('table').hasClass('.dateClass-' + $(this).text())) {
                        console.info("Got an event!");
                    } else {
                        console.info("No event on that day!");
                    }
                });*/

                for (var i = 0; i < 40; i++) {
                    if ($(element).hasClass('dateClass-' + i)) {
                        console.info("Event: " + event.start.year().toString() + "-" + event.start.month().toString() + "-" + event.start.date().toString());
                    } else {
                        console.info("No Event: " + event.start.year().toString() + "-" + event.start.month().toString() + "-" + event.start.date().toString());
                        var _date = event.start.year().toString() + "-" + event.start.month().toString() + "-" + event.start.date().toString()
                        var _event = [{ "title": "Closed", "start" : _date}];
                        $('#calendar').fullCalendar('addEvent', _event)
                    }
                }

            }
        }
    });

It doesn't seems to work... If you guys could help me to find a solution for that. I need to display closed to any days that doesn't have any event on any month.

Thanks a lot for your help!

Answer 1

My approach would be to use an array in the View Render Callback. representing the days in the month. Create it in your page load script. Reset it in the callback.

calendarDays = [];

In the Event Render Callback I would look at each event and set the corresponding position in the array to true.

calendarDays[event.date()] = true;

In the Event After All Render Callback I would look at how many days are in the month. For each day check the corresponding position in the array. If it does not exist, you don't have an event for the day and you can add a new one.