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

Backbonejs fullcalendar v2 load events from localstorage

本文关键字:存储 加载 事件 fullcalendar v2 Backbonejs      更新时间:2023-09-26

如何通过主干采集将数据从本地存储加载到新版本的fullcalendar?

我的本地存储数据:

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

不知道这是否是唯一的问题,但:

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

请参阅此处http://fullcalendar.io/docs/event_data/events_array/

你可以为此使用时刻(无论如何都包含在完整日历中)

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

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

注意,您也可以使用函数作为源(允许延迟获取)