Disable timeslot ranges in jQuery fullcalendar plugin

Question

I am developing a webapp and am using jQuery fullcalendar plugin.

I need to somehow disable certain time-slots.

The current method I am using is to add event

Answer 1

I found a solution by using another calendar: jquery-week-calendar ( https://github.com/themouette/jquery-week-calendar ).

This calendar has a feature called Freebusy. It's ment to be used to have busy and free timeslot ranges, but by altering the source code a bit, I am able to add background colors to timeslot ranges. I changed the method freeBusyRender as follows:

freeBusyRender: function(freeBusy, $freeBusy, calendar) {
    if(freeBusy.free == 't_red') {
        $freeBusy.css("backgroundColor", "red");
    } else if(freeBusy.free == 't_green') {
        $freeBusy.css("backgroundColor", "green");
    } else if(freeBusy.free == 't_blue') {
        $freeBusy.css("backgroundColor", "blue");
    } else if(freeBusy.free == 't_black') {
        $freeBusy.css("backgroundColor", "black");
    }
    $freeBusy.addClass('free-busy-free');
    return $freeBusy;
}

Then, I can initialize the calendar as follows:

(function($) {
    d = new Date();
    d.setDate(d.getDate() - (d.getDay() - 3));
    year = d.getFullYear();
    month = d.getMonth();
    day = d.getDate();
    var eventData2 = {
        options: {
            timeslotsPerHour: 4,
            timeslotHeight: 12,
            defaultFreeBusy: { free: true }
        },
        events: [
            { 'id': 1, 'start': new Date(year, month, day, 12), 'end': new Date(year, month, day, 13, 00), 'title': 'Lunch with Sarah'},
            { 'id': 2, 'start': new Date(year, month, day, 14), 'end': new Date(year, month, day, 14, 40), 'title': 'Team Meeting'},
            { 'id': 3, 'start': new Date(year, month, day + 1, 18), 'end': new Date(year, month, day + 1, 18, 40), 'title': 'Meet with Joe'},
            { 'id': 4, 'start': new Date(year, month, day - 1, 8), 'end': new Date(year, month, day - 1, 9, 20), 'title': 'Coffee with Alison'},
            { 'id': 5, 'start': new Date(year, month, day + 1, 14), 'end': new Date(year, month, day + 1, 15, 00), 'title': 'Product showcase'}
        ],
        freebusys: [
            { 'start': new Date(year, month, day - 1, 8), 'end': new Date(year, month, day - 1, 18), 'free': 't_red'},
            { 'start': new Date(year, month, day, 8), 'end': new Date(year, month, day + 0, 18), 'free': 't_green' },
            { 'start': new Date(year, month, day + 1, 8), 'end': new Date(year, month, day + 1, 18), 'free': 't_blue' },
            { 'start': new Date(year, month, day + 2, 14), 'end': new Date(year, month, day + 2, 18), 'free': 't_black'},
            { 'start': new Date(year, month, day + 3, 8), 'end': new Date(year, month, day + 3, 18), 'free': 't_red' }
        ]
    };
    $(document).ready(function() {
        var $calendar = $('#calendar').weekCalendar({

        allowCalEventOverlap: true,
        overlapEventsSeparate: true,
        totalEventsWidthPercentInOneColumn: 95,

        timeslotsPerHour: 4,
        scrollToHourMillis: 0,
        height: function($calendar) {
            return $(window).height() - $('h1').outerHeight(true);
        },
        eventRender: function(calEvent, $event) {
            if (calEvent.end.getTime() < new Date().getTime()) {
                $event.css('backgroundColor', '#aaa');
                $event.find('.wc-time').css({
                    backgroundColor: '#999',
                    border: '1px solid #888'
                });
            }
        },
        eventNew: function(calEvent, $event, FreeBusyManager, calendar) {
                    calEvent.id = calEvent.userId + '_' + calEvent.start.getTime();
        },
        data: function(start, end, callback) {
                    callback(eventData2);
        },
        displayFreeBusys: true,
        daysToShow: 7,
        switchDisplay: { '1 day': 1, '3 next days': 3, 'work week': 5, 'full week': 7 },
        headerSeparator: ' ',
        useShortDayNames: true
        });
    });
})(jQuery);

which gives me following result:

I bet this can be improved; I think I broke the freeBusy feature doing this, but I don't need it.