How to block out dates in the Fullcalendar beyond a certain date

Question

I have a date in the future which is always 30 days ahead of the current date. It's stored in a Date object. I worked this out using:

var currentDate = new Date();
var futureBlockDate = new Date();
futureBlockDate.setDate(currentDate.getDate() + 30);

Using the FullCalendar jQuery plugin I want to visually block out any days past this date on the calendar with a different background colour so a user knows they can't click on them or create an event on those days.

What is the best way to do this with the FullCalendar? Maybe disable all dates by default, and only enable for a specific range (from today's date through to 30 days in the future)?

I think I can apply a disabled background state to all the cells using the following code:

$(".fc-widget-content").addClass("disabled");

.disabled .fc-day-content {
    background-color: #123959;
    color: #FFFFFF;
    cursor: default;
}

How can it be done?

Answer 1

In new version V4 of Full Calendar, there are lot of updates and you can find the settings for your need

Limits which dates the user can navigate to and where events can go.

// constrain to a discrete range
var calendar = new Calendar(calendarEl, {
  defaultView: 'dayGridMonth',
  validRange: {
    start: '2017-05-01',
    end: '2017-06-01'
  }
});

// constrain to an open-ended range
var calendar = new Calendar(calendarEl, {
  defaultView: 'dayGridMonth',
  validRange: {
    start: '2017-05-01'
  }
});