30

Problem is, how to disable selectable on PAST DATES in fullcalendar's month/week view.

I want to user not allowed to click/select the on past dates.

enter image description here

Here is some googled code snippet I am trying to implement on event rendering:

selectable: true,
selectHelper: false,
select: function(start, end, allDay) {
        var appdate = jQuery.datepicker.formatDate('<?php echo $DPFormat; ?>', new Date(start));
        jQuery('#appdate').val(appdate);
        jQuery('#AppFirstModal').show();
    },
    eventRender: function(event, element, view)
    {
        var view = 'month' ;
       if(event.start.getMonth() !== view.start.getMonth()) { return false; }
    },

But its not working though.

I tried bellow CSS too and this help me to hide past date text only, but selectable is still working on pastdate box.

.fc-other-month .fc-day-number {
     display:none;
}

I am really stuck with this problem. Please someone help me out. Thanks...

17 Answers 17

40

I have done this in my fullcalendar and it's working perfectly.

you can add this code in your select function.

 select: function(start, end, allDay) {
    var check = $.fullCalendar.formatDate(start,'yyyy-MM-dd');
    var today = $.fullCalendar.formatDate(new Date(),'yyyy-MM-dd');
    if(check < today)
    {
        // Previous Day. show message if you want otherwise do nothing.
        // So it will be unselectable
    }
    else
    {
        // Its a right date
        // Do something
    }
  },

I hope it will help you.

7
  • 1
    Here am using this. Thanks. appointzilla.com/wordpress-google/?page_id=8
    – Frank
    Feb 22, 2013 at 13:01
  • 11
    formatDate() seems to be gone in the latest version. Use instead: var check = start._d.toJSON().slice(0,10); var today = new Date().toJSON().slice(0,10); to get the dates as yyyy-MM-dd
    – Avatar
    Apr 24, 2015 at 20:05
  • 1
    start and end are already moment,js objects so you can just do: var check = start.format("YYYY-MM-DD"); var today = moment().format("YYYY-MM-DD"); May 17, 2016 at 15:36
  • 2
    because of moment formate it will now work with this var selectedDate = moment(start).format('YYYY/MM/DD'); var todayDate = moment().format('YYYY/MM/DD'); if(selectedDate >= todayDate){}
    – khan
    Apr 7, 2018 at 8:56
  • I am using full calendar 4 version. It works. select: function(start, end, allDay) { var selectedDate = moment(start.start).format('YYYY/MM/DD'); var todayDate = moment().format('YYYY/MM/DD'); if(selectedDate >= todayDate){ addAvailability(start.startStr, start.endStr); } else { alert('Previous date is not allowed'); } },
    – Kamlesh
    Oct 31, 2019 at 5:44
32

I like this approach:

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

It will essentially disable selection on times before "now".

Unselect method

1
  • I assume it will fail when selecting the "allDay" slot of the current day.
    – Hagai Wild
    Sep 19, 2022 at 5:27
15

Thanks to this answer, I've found the solution below:

$('#full-calendar').fullCalendar({
    selectable: true,
    selectConstraint: {
        start: $.fullCalendar.moment().subtract(1, 'days'),
        end: $.fullCalendar.moment().startOf('month').add(1, 'month')
    }
});
0
11

The old answers to this question are ok...

However, the official documentation suggests a new, more concise solution:

First set the day you want to be the lower bound

 var today = new Date().toISOString().slice(0,10);

Then include the range using validRange. Simply omit the end date.

 validRange: {
    start: today
 }
10

I have tried this approach, works well.

$('#calendar').fullCalendar({
   defaultView: 'month',
   selectable: true,
   selectAllow: function(select) {
      return moment().diff(select.start, 'days') <= 0
   }
})

Enjoy!

7

In fullcalendar 3.9, you might prefer the validRange function parameter :

validRange: function(nowDate){
    return {start: nowDate} //to prevent anterior dates
},

Drawback: this also hides events before that datetime

0
7

In FullCalendar v3.0, there is the property selectAllow:

selectAllow: function(info) {
    if (info.start.isBefore(moment()))
        return false;
    return true;          
}
1
  • and if you want to allow from today's date to any future date : Change if condition as :- if ( info.start.isBefore(moment().add(-1, 'days')) )
    – 9paradox
    Oct 9, 2018 at 10:51
5

You can combine:

-hide text by CSS as mentioned in question

-disable PREV button on current month

-check date on dayClick/eventDrop etc:

dayClick: function(date, allDay, jsEvent, view) {
    var now = new Date();
    if (date.setHours(0,0,0,0) < now.setHours(0,0,0,0)){
        alert('test');
    }
    else{
         //do something
    }
}
0
2

This is what I am currently using

Also added the .add() function so the user cannot add an event at the same hour

select: function(start, end, jsEvent, view) {
               if(end.isBefore(moment().add(1,'hour').format())) {
               $('#calendar').fullCalendar('unselect');
               return false;
             }
0
2

You can use this:

var start_date= $.fullCalendar.formatDate(start,'YYYY-MM-DD');

var today_date = moment().format('YYYY-MM-DD');

if(check < today)
{
    alert("Back date event not allowed ");
    $('#calendar').fullCalendar('unselect');
    return false
}
1

below is the solution i'm using now:

        select: function(start, end, jsEvent, view) {
            if (moment().diff(start, 'days') > 0) {
                $('#calendar').fullCalendar('unselect');
                // or display some sort of alert
                return false;
            }
1

No need for a long program, just try this.

checkout.setMinSelectableDate(Calendar.getInstance().getTime());    
Calendar.getInstance().getTime() 

Gives us the current date.

1

I have been using validRange option.

validRange: { start: Date.now(), end: Date.now() + (7776000) // sets end dynamically to 90 days after now (86400*90) }

0

In Fullcalendar i achieved it by dayClick event. I thought it is the simple way to do it.

Here is my code..

 dayClick: function (date, cell) {
              var current_date = moment().format('YYYY-MM-DD')
              // date.format() returns selected date from fullcalendar
              if(current_date <= date.format()) {
                //your code
              }
            }

Hope it helps past and future dates will be unselectable..

0

if any one of answer is not work for you please try this i hope its work for you.

 select: function(start, end, allDay) {                

              var check = formatDate(start.startStr);
              var today = formatDate(new Date());

              if(check < today)
              {
                 console.log('past');                     
              }
              else
              {                    
                console.log('future');
              }
}

and also create function for date format as below

function formatDate(date) {
      var d = new Date(date),
          month = '' + (d.getMonth() + 1),
          day = '' + d.getDate(),
          year = d.getFullYear();

      if (month.length < 2) month = '0' + month;
      if (day.length < 2) day = '0' + day;

      return [year, month, day].join('-');
  }

i have tried all above question but not work for me

you can try this if any other answer work for you.

thanks

0

just add this if statement

 select(info) {
      if (moment(info.start).format() > moment().format()) {
       //your code here
      } else {
        toast.error("Please select valid date");
      }
    },

1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Mar 4, 2022 at 11:19
0

For FullCalendar React (Disable past day completely):

selectAllow={c => (moment().diff(c.start, 'hours') <= 0)}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.