完整的日历保存事件

Question

I'm having some issues with saving the end time with fullcalendar and having it be able to be dragged to encompass more than one day on the calendar. I have it set to save data via jQuery.post to my database, but I can't seem to figure out how to get the end value to populate and the ability to drag it across more than one day. Here is my code I have in place:

var calendar = $('#calendar').fullCalendar({
             header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay',
             },

             editable: true,
             selectable: true,
             selectHelper: true,

             select: function (start, end, allDay) {
                 var title = prompt('Event Title:');

                 if (title) {
                     calendar.fullCalendar('renderEvent', {
                         title: title,
                         start: start,
                         end: end,
                     }, true);
                 }

                 calendar.fullCalendar('unselect');
             },

             eventDrop: function (event, dayDelta, minuteDelta) {
                 alert(event.title + ' was saved!');

                 jQuery.post(
                    '/event/save', 
                    {
                        title: event.title,
                        start: event.start,
                        end:   event.end
                    }
                 );
             }
        });

Any help would be appreciated! Thanks

(I can also provide a url if that helps anyone determine the issue)

Answer 1

Your code looks good. Its almost there. You need to implement the eventResize to save the effect of dragging the event across days. ideally, create a function to post your data and call it from each event.

function saveMyData(event) {
    jQuery.post(
        '/event/save', 
        {
            title: event.title,
            start: event.start,
            end:   event.end
        }
    );
}

...
select: function (start, end, allDay) {
            var title = prompt('Event Title:');
            if (title) {
                calendar.fullCalendar('renderEvent', {
                    title: title,
                    start: start,
                    end: end,
                    }, true);
                }

                calendar.fullCalendar('unselect');
                saveMyData({'title': title, 'start': start, 'end': end});
            },

eventDrop: function (event, dayDelta, minuteDelta) {
               saveMyData(event);
           },

eventResize: function (event, dayDelta, minuteDelta) {
                 saveMyData(event);
             }
...