How to make past date unselectable in fullcalendar?

Question

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.

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...

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

selectAllow: function(info) {
    if (info.start.isBefore(moment()))
        return false;
    return true;          
}

Answer 6

I have tried this approach, works well.

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

Enjoy!

Answer 7

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

Answer 8

No need for a long program, just try this.

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

Gives us the current date.

Answer 9

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

Answer 10

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

Answer 11

I have been using validRange option.

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

Answer 12

*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

 }

Answer 13

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..

Answer 14

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