Disable timeslot ranges in jQuery fullcalendar plugin

fullcalendar, javascript, jquery

Solution

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.

Problem

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 events for the time-slots I want to disable and disallow event overlapping. Is there a better way to do this? I rather not disallow event overlapping. I can live with the solution for the above problem: adding black timeslots and disallow the adding of timeslots in those areas. Nevertheless I have a more pressing problem. I need to be able to change the background color of slots for certain time ranges. Ideally I would be using this in the same way as the eventSources; just point to an url and send the to be colored ranges back with ajax/json. The bounty I am about to add is for this last problem (colourized slot ranges, as well in day and week view). If someone can suggest me to another solution then full calendar that can do this, that's also fine.

Original source