JQuery full calendar - How do I disable dates that are greater than 90 days?

JavaScript
,
1

hi guys
I am using a Jquery calendar and it can select the date and I have added a vue.js validation to ensure the date selected is not beyond 90 days from todays date.

PROBLEM
I want to disable any future date from 90 days and tried using the

I have tried both property validDate and visibleRange to stop users from selecting any date greater than 90 days

I have searched online and not seen any similar to the fullcalendar with restricted dates as of posting this. thanks


$('div[data-type="datepicker-coverStartDate"]').fullCalendar({
                dayClick: function (date, allDay, jsEvent, view) {
                    if (moment(date).isSameOrAfter(moment().startOf('day'))) {
                        $('.fc-state-highlight').removeClass("fc-state-highlight");
                        $(this).addClass("fc-state-highlight");
                        console.log('Clicked on the entire day: ' + date);
                        onDatePickerChanged('coverStartDate', date.toLocaleDateString("en-gb"));
                    }
                }
2

Looks like you just need to set the validRange configuration…

3

I tried adding the validRange, but its not greyed out in my runtime calendar. here is my updated code

        $('div[data-type="datepicker-coverStartDate"]').fullCalendar({

            dayClick: function (date, allDay, jsEvent, view) {
                if (moment(date).isSameOrAfter(moment().startOf('day'))) {
                    $('.fc-state-highlight').removeClass("fc-state-highlight");
                    $(this).addClass("fc-state-highlight");
              
                    onDatePickerChanged('coverStartDate', date.toLocaleDateString("en-gb"));
                }
                if (date >= newdate) {
                    $(this).removeClass("fc-state-highlight");
                    $(this).addClass("fc-state-disabled");
                    
                }
            }, validRange: {
                start: '2021-12-12',
                end: '2022-12-12'
            }
        });
4

Well, I’m guessing by reading documentation and other sources since I’ve never used it…

A sample to disable dates outside the date range…http://jsfiddle.net/ppumkin/7MTdn/

Styling it looks to be harder…according to the documentation, the dates outside of the range are supposed to be greyed out, but it doesn’t look like it works that way based on my testing, nor is a class added to either the dates in range, or to the dates out of range that can be styled.

I found this but it isn’t exactly what you’re looking for but should be able to be hacked to meet the needs: https://shinesolutions.com/2011/08/05/building-a-shared-calendar-with-backbone-js-and-fullcalendar-a-step-by-step-tutorial/

But it obviously can be done since it’s in the demo…https://fullcalendar.io/demos (look at background events)

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.