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

Solution 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/

Solution 2

eventDrop should get you there:

eventDrop: function(event, delta, revertFunc) {
        if(event.start < currentDate) {
            revertFunc();
        }
    }

Solution 3

This is the solution for fullcallendar v4.

        eventDrop: function (info) {
            var newDate = new Date(info.event.start);
            if (newDate < Date.now()) {
                info.revert();
            }
        }

Comments

[FireDrakon]

Thanks for the answering.. The thing is when I drop an event, only the 'drop' and 'eventReceive' events are triggered. So there is no way to revert a dropped event in case of any accident. any thoughts?

[smcd]

What version of fullcalendar are you using? eventDrop (available in version 2) works as expected. example from slyvain's code snip

[smcd]

Sorry, just re-read your question and you were discussing external event drops.

[FireDrakon]

This is perfect!! Thank you. Can you tell me where I can find the css classes for the timeslots in agendaDay mode? I need to grey out the past time slots for the current day too.

[FireDrakon]

I am using version 2.2. My bad.. I didn't mention external events before.

[Slyvain]

Indeed, with external events, my solution does not work. My apologies for missing this important detail ;)

[smcd]

Using businessHours can let you gray it out, and setting the Hour/Minute in eventConstraint prevents dropping in the past in week or day view. As a side effect though, it also prevents dropping an event on today in Month view. Updated answer and link to fiddle. A periodic refresh of the calendar may be needed; example, someone opens the site at the start of today, leaves it open in the browser, and around lunch may be able to drag an event to 9AM today.

[FireDrakon]

Thanks. But what I expect is, say for example the business hours is set from 9-5. Current time is 10. I don't want the user to allow to drop to a time before 10. Is that possible? If there is a css class or something to mark the past time slots, it will be easy. Hope you get what I mean.

[Aimal Khan]

Upvoted as the REVERTFUNC() did the trick for me. Not related to the eventDrop fun :P

[Zia Ul Rehman Mughal]

Still works on latest fullcalender/react package as well :+1