Backbonejs fullcalendar v2从本地存储加载事件
Backbonejs fullcalendar v2 load events from localstorage
如何通过主干采集将数据从本地存储加载到新版本的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/
你可以为此使用时刻(无论如何都包含在完整日历中)
- moment.unix(数字)
- moment.toISOString()//2013-02-04T22:44:30.652Z
如果不接受时区,则使用格式http://momentjs.com/docs/#/displaying/format/
注意,您也可以使用函数作为源(允许延迟获取)
相关文章:
- 加载存储在IndexedDB中的HTML页面
- 在webView上加载本地存储的文件时延迟
- 将图像从本地存储加载到画布仅每秒刷新一次
- ExtJS :: 存储加载数据方法优化
- 将图像从表单保存到本地存储并存储/加载它
- 如何在存储加载之前向面板添加遮罩,并在存储加载后删除
- 将文本文件从手机存储加载到 HTML 文本区域
- 如何使用 html5 本地存储加载值
- ExtJs 4.2, 网格中继来自存储加载事件的事件导致未捕获的类型错误: 未定义不是一个函数
- Sencha touch 2-自定义组件开发数据项未从存储加载值
- 使用javascript从JSON文件中搜索并从本地存储加载
- 更改从存储加载选项的下拉dojo的字体大小
- 如何在ExtJS 4中将存储加载到组合框时发送额外的参数
- Backbonejs fullcalendar v2从本地存储加载事件
- 如果代理遇到异常,ExtJS 4.0将取消存储加载
- 从本地存储加载图像并保留它
- 如何防止从本地存储加载样式表时呈现css
- ExtJs:等待直到存储加载,然后执行next语句
- 从 Web 存储加载包含 HTML 的页面
- 从localStorage存储/加载修改后的HTML5页面