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 finally got this available slots to work per days.

adjustment of koosvdkolk's answer to have different available slots per days:

   function adjustWorkHourSlotSize(day_num) {
      $(".day"+day_num+"slot").width($(".fc-col"+day_num).width()-2);

   }

   function addWorkHours2(availablePeriods, calendar_element) {
       if (availablePeriods !== undefined) {
          numberOfAvailablePeriods =  availablePeriods.length;

          //slots.addClass('nySchedule_unavailable_slots'); 
          //iterate trough days and get avail periods for each day of week
          currentView = calendar_element.fullCalendar('getView');
          currentView =  currentView.name;
          if (currentView === 'agendaWeek' || currentView === 'agendaDay') {



            scheduleStartTime = timeToFloat(calendar_element.fullCalendar( 'option', 'minTime'));            
            scheduleSlotSize = calendar_element.fullCalendar( 'option', 'slotMinutes') /60;
            /* function to calculate slotindex for a certain time (e.g. '8:00') */    
            getSlotIndex = function(time) {
              time = timeToFloat(time);            
              return Math.round((time-scheduleStartTime)/scheduleSlotSize);
            }

            slots_content = calendar_element.find('.fc-agenda-slots tr .ui-widget-content div');
            for (var i=0; i!=numberOfAvailablePeriods; i++) {
              if (currentView === 'agendaWeek') {

                slots_content.append("
");
                $(".day"+i+"slot").addClass('unavailable');
                adjustWorkHourSlotSize(i);
              }


              dayPeriodsLength=availablePeriods[i].length;
              for (var j=0; j!=dayPeriodsLength; j++) {
                start=availablePeriods[i][j][0];
                end=availablePeriods[i][j][1];

                startOfPeriodSlot = getSlotIndex(timeToFloat(start));
                endOfPeriodSlot = getSlotIndex(timeToFloat(end));
                for (k=startOfPeriodSlot; k

now just call:

var availablePeriods = [ [["8:00", "16:00"],["3:00", "5:00"]], [["9:00", "14:00"]] ];
addWorkHours2(availablePeriods, $("#calendar"));

and dont forget css classes:

.dayslot {
  float: left;
  margin-left: 2px;
}

.fc-agenda-slots .unavailable{
  background-color: #e6e6e6;

}