禁用fullcalendar插件中的时隙

Question

I was using a fullcalendar plugin for my booking system. How can I disable the day and time in the calendar so that the user cannot book an event in that certain day and time? The code I've tried so far is below, but it currently doesn't work.

disableDate:function(date)
{
   if(options.disableDates) {
      var disabled_dates = options.disableDates
      var string_date = formatDate(date,"MM-dd-yyyy")
      if (disabled_dates.indexOf(string_date) > -1 )
      {
         return true
      }
   }
   return false
}

Answer 1

You can use the Background Events to accomplish this. In this codepen example I use some of the code from the FullCalendar Background Events Demo to set background events that will not allow certain events to be placed in that spot.

// red areas where no events can be dropped
{
    start: '2016-08-24',
    end: '2016-08-28',
    overlap: false,
    rendering: 'background',
    color: '#ff9f89'
}

Check out the week view where you can also set constraints where only specified events can be placed in the Background Events.

{
    title: 'Meeting',
    start: '2016-08-13T11:00:00',
    constraint: 'availableForMeeting', // defined below
    color: '#257e4a'
},
{
    id: 'availableForMeeting',
    start: '2016-08-11T10:00:00',
    end: '2016-08-11T16:00:00',
    rendering: 'background'
}