Fullcalendar display issue loading events and selectability

Question

What I am trying to accomplish is to have use Fullcalendar to load in events from a Google calendar but only showing the days of that month and the days that do not have a scheduled event. These available days are then clicked on to bring up a contact form.

Issues

1. When changing months there is a flutter as events are loaded in from a Google calendar. Is there a way to load the events then show each month; or maybe there a way to avoid putting a mask (highlighted in blue) to cover up the day altogether and indicate that if there is an event, to make that day not visible?

2. In addition to events and days from other months not being visible, is there a way to make them not click-able too? Notice how clicking outside of the blue box also brings up a modal.

Here is what I have so far - http://jsfiddle.net/AzmJv/151/

JS

$(document).ready(function () {

var calendar = $('#calendar').fullCalendar({
    defaultView: 'month',
    events: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',
    eventClick: function (event) {
        return false;
    },
    editable: false,
    selectable: true,
    //header and other values
    select: function (date, allDay) {
        date = $.fullCalendar.formatDate(date, 'dddd dd MMMM yyyy');

        var mywhen = date;

        $('#createEventModal #apptAllDay').val(allDay);
        $('#createEventModal #when').text(mywhen);
        $('#createEventModal').modal('show');
    }
});

$('#submitButton').on('click', function (e) {
    // We don't want this to act as a link so cancel the link action
    e.preventDefault();

    doSubmit();
});

function doSubmit() {
    $("#createEventModal").modal('hide');
    console.log($('#apptStartTime').val());
    console.log($('#apptEndTime').val());
    console.log($('#apptAllDay').val());
    alert("form submitted");

    $("#calendar").fullCalendar('renderEvent', {
        title: $('#patientName').val(),
        start: new Date($('#apptStartTime').val()),
        end: new Date($('#apptEndTime').val()),
        allDay: ($('#apptAllDay').val() == "true"),
    },
    true);
}
});

Any help is greatly appreciated. Thank you.

Answer 1

You can check the presence of and event using clientEvents:

Retrieves events that FullCalendar has in memory.

and if there are any stop your function.

Code:

select: function (date, allDay) {

            var dayEvents = $('#calendar').fullCalendar('clientEvents', function (event) {
                return event.start.setHours(0, 0, 0, 0) === date.setHours(0, 0, 0, 0);
            });

            if (dayEvents.length>0) return

            date = $.fullCalendar.formatDate(date, 'dddd dd MMMM yyyy');

            var mywhen = date;

            $('#createEventModal #apptAllDay').val(allDay);
            $('#createEventModal #when').text(mywhen);
            $('#createEventModal').modal('show');
        }
    });

You can style the presence of an event using:

.fc-event-skin {
    border: 1px dotted red !important;
    background-color: transparent !important;
    color: black;    
}

Demo: http://jsfiddle.net/IrvinDominin/gmm8b/1/