Backbonejs fullcalendar v2 从本地存储加载事件

Question

如何通过主干集合将本地存储中的数据加载到新版本的全日历？

我的本地存储数据：

  if(localStorage.getItem('events') == null){
    var events = [
    {"title":"Event 1","start":"2014-09-13T04:00:00.000Z","end":"0000-00-00 00:00:00","creator":432,"backgroundColor":"rgb(190, 219, 5","allDay":"true"},
    {"title":"Event 2","start":"2014-09-28T11:30:00.000Z","end":"2014-09-28T19:30:00.000Z","creator":432,"backgroundColor":"rgb(190, 219, 5","allDay":""},
    {"title":"Event 3","start":"2014-09-09T04:00:00.000Z","end":"2014-09-11T04:00:00.000Z","creator":432,"backgroundColor":"rgb(31, 138, 11","allDay":"true"}
    ];
    localStorage.setItem('events',JSON.stringify(events));
}

这是我的看法：

define([
'underscore',
'backbone',
'models/event/Event',
'collections/events/Events',
'text!templates/calendar/calendarTemplate.html',
'momentjs',
'fullcalendar',
],  function(_, Backbone, Event, Events, calendarTemplate, fullcalendar
){
var EventsView = Backbone.View.extend({
    el: document.getElementById("content"),
    render: function() {
        var self = this;
    var events = JSON.parse(localStorage.getItem('events'));
        var events = new Events(events);
    var jsevents = events.toJSON();
    this.el.innerHTML = _.template( calendarTemplate,{data : jsevents} );

        $('#calendar').fullCalendar({
         agenda: 'h:mm{ - h:mm}',
                     '': 'h(:mm)t',
             aspectRatio: 1.5,
             droppable: true,
             weekend: true,
     editable: true,
         defaultView: 'month',
         firstDay: 1,
         handleWindowResize: true,
             allDayDefault: false,
         firstHour: 7,
         columnFormat: {
             month: 'dddd',    
             week: 'ddd, dS', 
             day: 'dddd, MMM dS'
         },
         header: {
                 right: 'prev,next',
                 center: 'title',
                 left: 'month,agendaWeek,agendaDay'
         },
     selectable: true,
     selectHelper: true,
     select: function(start, end) {
                 var title = prompt('Event Title:');
             var eventData;
             if (title) {
             eventData = {
                title: title,
            start: start,
            end: end
            };
                $('#calendar').fullCalendar('renderEvent', eventData, true);
            }
            $('#calendar').fullCalendar('unselect');
         },
         events: []
        });
        $('#calendar').fullCalendar( 'addEventSource', jsevents );
    },        
});
return EventsView;
});

您可以看到我的日历数据是 jsevents。那么如何将其加载到我的完整日历中？ GIT上的应用程序感谢您的帮助

更新：

define([
'underscore',
'backbone',
'models/event/Event',
'collections/events/Events',
'text!templates/calendar/calendarTemplate.html',
'momentjs',
'fullcalendar',
],  function(_, Backbone, Event, Events, calendarTemplate, fullcalendar
){
var EventsView = Backbone.View.extend({
    el: document.getElementById("content"),
    render: function() {
        var self = this;
    var events = JSON.parse(localStorage.getItem('events'));
        var events = new Events(events);
    var jsevents = events.toJSON();
    this.el.innerHTML = _.template( calendarTemplate,{data : jsevents} );

        $('#calendar').fullCalendar({
         agenda: 'h:mm{ - h:mm}',
                     '': 'h(:mm)t',
             aspectRatio: 1.5,
             droppable: true,
             weekend: true,
     editable: true,
         defaultView: 'month',
         firstDay: 1,
         handleWindowResize: true,
             allDayDefault: false,
         firstHour: 7,
         columnFormat: {
             month: 'dddd',    
             week: 'ddd, dS', 
             day: 'dddd, MMM dS'
         },
         header: {
                 right: 'prev,next',
                 center: 'title',
                 left: 'month,agendaWeek,agendaDay'
         },
     selectable: true,
     selectHelper: true,
     select: function(start, end) {
                 var title = prompt('Event Title:');
             var eventData;
             if (title) {
             eventData = {
                title: title,
            start: start,
            end: end
            };
                $('#calendar').fullCalendar('renderEvent', eventData, true);
                events.push(eventData);
                localStorage.setItem('events',JSON.stringify(events));
            }
            $('#calendar').fullCalendar('unselect');
         },
         events: function(start, end, timezone, callback) {
                callback(jsevents);
         }
        });
        $('#calendar').fullCalendar( 'addEventSource', jsevents );
    },        
});
return EventsView;
});

Answer 1

不知道这是不是唯一的问题，但是：

.start 和 .end 需要是格式如下的字符串：“2010-01-09T12:30:00”

请看这里http://fullcalendar.io/docs/event_data/events_array/

您可以为此使用时刻（无论如何都包含在完整日历中）

1. moment.unix(Number)
2. moment.toISOString() // 2013-02-04T22:44:30.652Z

如果不接受时区，则使用格式 http://momentjs.com/docs/#/displaying/format/

请注意，您也可以使用函数作为源（允许延迟获取）