CODEWITHSUNDEEP
jquerydatefullcalendarfullcalendar-1
Frank
Frank

Reputation: 2357

How to make past date unselectable in fullcalendar?

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

Upvotes: 31

Views: 80018

Answers (17)

DevWithSigns
DevWithSigns

Reputation: 725

For FullCalendar React (Disable past day completely):

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

Upvotes: 0

Harish Gautam
Harish Gautam

Reputation: 31

just add this if statement

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

Upvotes: 0

Novasol
Novasol

Reputation: 947

I have tried this approach, works well.

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

Enjoy!

Upvotes: 11

P P
P P

Reputation: 49

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
}

Upvotes: 2

Dev Oskii
Dev Oskii

Reputation: 929

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
 }

Upvotes: 13

Ramiz Web Dev
Ramiz Web Dev

Reputation: 621

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

Upvotes: 0

Parthiban Soundram
Parthiban Soundram

Reputation: 738

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

Upvotes: 0

Dave Chen
Dave Chen

Reputation: 10975

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

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

Upvotes: 7

Deniz Kaplan
Deniz Kaplan

Reputation: 1609

I have been using validRange option.

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

Upvotes: 1

Andr&#233; Fernandes
Andr&#233; Fernandes

Reputation: 21

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

Upvotes: 2

nicolallias
nicolallias

Reputation: 1122

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

Upvotes: 8

Akila Jayasinghe
Akila Jayasinghe

Reputation: 11

No need for a long program, just try this.

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

Gives us the current date.

Upvotes: 1

Mausami
Mausami

Reputation: 692

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.

Upvotes: 40

Michal Gallovic
Michal Gallovic

Reputation: 4229

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

Upvotes: 31

dap.tci
dap.tci

Reputation: 2485

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

Upvotes: 15

david
david

Reputation: 43

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

Upvotes: 1

Lukasz Koziara
Lukasz Koziara

Reputation: 4320

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

Upvotes: 5

Related Questions