Jquery FullCalendar延长开始日期或结束日期

Question

I am using Jquery FullCalendar.

Here is the link of calender I am using : http://arshaw.com/fullcalendar/

I have a case where I have startdate and enddate.

Now if I extend startdate or enddate by dragging it.

How can I get the response event that was triggered when I dragged/extend the date?

For Example:

When I move the event from one date to another I use eventDrop . It gives me the days added or subtracted to the original dates.

I need the same solution for extending startdate or enddate.

Possibilities I am facing:

Original Dates : 2013-12-04 to 2013-12-07

When Extends : 2013-12-04 to 2013-12-10

OR

When Extends : 2013-12-01 to 2013-12-07

Here are the cases I am facing. How can I track that what event I performed in Calender and what parameters it pass ?

Answer 1

You can use eventResize

below is the example from offical site:

http://arshaw.com/fullcalendar/docs/event_ui/eventResize/

$('#calendar').fullCalendar({
    events: [
        // events here
    ],
    editable: true,
    eventResize: function(event,dayDelta,minuteDelta,revertFunc) {

        alert(
            "The end date of " + event.title + "has been moved " +
            dayDelta + " days and " +
            minuteDelta + " minutes."
        );

        if (!confirm("is this okay?")) {
            revertFunc();
        }

    }
});

Answer 2

Jquery Fullcalender is providing alot of options where you play around wth your events , as per you requirement

Original Dates : 2013-12-04 to 2013-12-07

When Extends : 2013-12-04 to 2013-12-10

This is when you extend the event duration, to catch the event where you change the end date you can use the below code

eventResizeStart: function (event, jsEvent, ui, view) {
    console.log('RESIZE START ' + event.title);

},
eventResizeStop: function (event, jsEvent, ui, view) {
    console.log('RESIZE STOP ' + event.title);

},
eventResize: function (event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
    console.log('RESIZE!! ' + event.title);
    console.log(dayDelta + ' days'); //this will give the number of days you extended the event
    console.log(minuteDelta + ' minutes');

},

Original Dates : 2013-12-04 to 2013-12-07

When Extends : 2013-12-01 to 2013-12-07

This is when you pre-pone the event , then you can use the below code

eventDragStart: function (event, jsEvent, ui, view) {
    console.log('DRAG START ' + event.title);
    console.log(this);
},
eventDragStop: function (event, jsEvent, ui, view) {
    console.log('DRAG STOP ' + event.title);
    console.log(this);
},
eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
    console.log('DROP ' + event.title);
    console.log(dayDelta + ' days'); //this will give the number of days you dragged before or after
    console.log(minuteDelta + ' minutes');
    console.log('allday: ' + allDay);

},

As per you comment above that if you want to restrict the user from dragging a event or resizing a event , then you can use eventDurationEditable , this is true by default

eventDurationEditable:false,