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

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?

Answers:

Answer

Use the dayRender option to add a "disabled" class to out of range dates.

$('#calendar').fullCalendar({
    ...
    dayRender: function(date, cell){
        if (date > maxDate){
            $(cell).addClass('disabled');
        }
    }
    ...
});

You can also use the viewRender event and the gotoDate method, to prevent users to navigate farther than 30 days after today :

$('#calendar').fullCalendar({
    ...
    viewRender: function(view){
        if (view.start > maxDate){
            $('#calendar').fullCalendar('gotoDate', maxDate);
        }
    }
    ...
});
Answer

How about this solution?

dayClick: function(date, allDay, jsEvent, view) {
   var myDate = new Date();

   //How many days to add from today?
   var daysToAdd = 15;

   myDate.setDate(myDate.getDate() + daysToAdd);

   if (date < myDate) {
       //TRUE Clicked date smaller than today + daysToadd
       alert("You cannot book on this day!");
   } else {
       //FLASE Clicked date larger than today + daysToadd
       alert("Excellent choice! We can book today..");
   }

}
Answer

For someone who is looking for a solution to define a min-display-date and max-display-date: (for fullcalendar v2)

$('#calendar').fullCalendar({
    defaultDate: new Date(),
    viewRender: function(view, element) {

        curdate = new Date();
        viewdate = new Date(view.start);

        // PREV - force minimum display month to current month
        if (new Date(viewdate.getFullYear(), viewdate.getMonth() + 1, 1).getTime() <= 
            new Date(curdate.getFullYear(), curdate.getMonth(), 1).getTime()){
            $('.fc-prev-button').prop('disabled', true);
            $('.fc-prev-button').css('opacity', 0.5);
        } else {
            $('.fc-prev-button').prop('disabled', false);
            $('.fc-prev-button').css('opacity', 1);
        }

        // NEXT - force max display month to a year from current month
        if (new Date(viewdate.getFullYear(), viewdate.getMonth() + 1).getTime() >= 
            new Date(curdate.getFullYear() + 1, curdate.getMonth() + 1).getTime()){
            $('.fc-next-button').prop('disabled', true);
            $('.fc-next-button').css('opacity', 0.5);
        } else {
            $('.fc-next-button').prop('disabled', false);
            $('.fc-next-button').css('opacity', 1);
        }
    }
});
Answer

this one chose the current month period

<?php $numerodias = cal_days_in_month(CAL_GREGORIAN, date('m'), date('Y')); ?>
$('#calendar').fullCalendar({
            header: {
                left: 'prev,next',
                center: 'title',
                right: 'today'
            },
            defaultDate: moment(),
            editable: false,
            //height:'auto',
            //weekends: false,
            defaultView: 'agendaWeek', 
            eventLimit: true, 

            events: {
                url: 'php/get-events.php',
                error: function() {
                    $('#script-warning').show();
                }

            },
            loading: function(bool) {
                $('#loading').toggle(bool);

            },
        viewRender: function(view,element) {
            var now = new Date();
            var end = new Date();
            end.setMonth(now.getMonth()); 
            end.setDate(<?php echo $numerodias; ?>);
            now.setDate(1);
            if ( end < view.end) {
                $("#calendar .fc-next-button").hide();
                return false;
                alert(end);
            }
            else {
                $("#calendar .fc-next-button").show();
            }

            if ( view.start < now) {
                $("#calendar .fc-prev-button").hide();
                return false;
            }
            else {
                $("#calendar .fc-prev-button").show();
            }
        }
        });
    });
Answer

for disable cell on click (version 2.0) :

dayRender: function( date, cell ) {
     // It's an example, do your own test here
    if(cell.hasClass("fc-other-month")) {
          cell.addClass('disabled');
     } 

},
dayClick: function(date, jsEvent, view) {
    if($(jsEvent.target).hasClass("disabled")){
        return false;
    }
    // Your code
    // ....
}
Answer

Simply add this code in Fullcalendar:

select: function (start, end, jsEvent, view) {
            if (start.isBefore(moment())) {
                $('#calendar').fullCalendar('unselect');
                return false;
            }
            else {

                 var currentDate = moment(start).format('YYYY/MM/DD'));
                 alert(currentDate);
            } 
        }

Simple and fast. Enjoy!

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.