javascript - Disable drop on past dates in FullCalendar

Question

I started using the FullCalendar plugin recently. I am trying to implement a function on dropping events in the calendar. But before saving to the database, I want to check and disable/prevent dropping external events on dates before today.

Any idea on how to do this?? I am looking for something like the past days getting greyed-out or something like that so that I can display the events already present as well. Just want to prevent the user from dropping an event on a past date.

EDIT:

 drop: function (date, jsEvent, ui) {

     if(date<currentDate) {
         $('#calendar').fullCalendar('removeEvents', event.id);
     }

I tried using this method to remove the dropped event from the calendar and to append it to the div again. Even then, it is not getting removed.

Thanks. :)

Answer 1

eventConstraint can disable dragging and dropping outside of established boundaries

To gray out past days

/* SHADE DAYS IN THE PAST */
td.fc-day.fc-past {
    background-color: #EEEEEE;
}

And for eventConstraint

        /* This constrains it to today or later */
        eventConstraint: {
            start: moment().format('YYYY-MM-DD'),
            end: '2100-01-01' // hard coded goodness unfortunately
        }

http://jsfiddle.net/1qsrjffL/

For the 'end' of eventConstraint, you could add days to the current date if you like vs hard coded

EDIT:

To gray out time in the day view you can use businessHours

businessHours: {
    start: moment().format('HH:mm'), /* Current Hour/Minute 24H format */
    end: '17:00', // 5pm? set to whatever
    dow: [0,1,2,3,4,5,6] // Day of week. If you don't set it, Sat/Sun are gray too
}

Dropping of external events onto the agendaDay in the past is allowed to occur. Editing the eventConstraint to include time will work 'YYYY-MM-DD HH:mm' but it prevents dropping on today in Month view...

http://jsfiddle.net/1qsrjffL/1/