I'm having some issues with saving the end time with fullcalendar and having it be able to be dragged to enpass 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)

I'm having some issues with saving the end time with fullcalendar and having it be able to be dragged to enpass 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)

• javascript
• jquery
• fullcalendar

1 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);
             }
...