CODEWITHSUNDEEP
phpjqueryfullcalendar
kuzo
kuzo

Reputation: 19

Disable time slots in fullcalendar plugin

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
}

Upvotes: 1

Views: 3488

Answers (1)

Ryan89
Ryan89

Reputation: 1216

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'
}

Upvotes: 1

Related Questions