javascript - 全日历保存事件

Question

我在使用 fullcalendar 保存结束时间并使其能够被拖动以包含日历上的一天以上时遇到了一些问题。我已将其设置为通过 jQuery.post 将数据保存到我的数据库中，但我似乎无法弄清楚如何获取要填充的最终值以及将其拖过一天以上的能力。这是我的代码:

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

任何帮助将不胜感激!谢谢

(如果这有助于任何人确定问题，我也可以提供一个 url)

Answer 1

您的代码看起来不错。它几乎在那里。您需要实现 eventResize 以保存跨天拖动事件的效果。理想情况下，创建一个函数来发布您的数据并从每个事件中调用它。

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