1
如何通過骨幹網收集將數據從本地存儲加載到新版本的fullcalendar?本地存儲的Backbonejs fullcalendar v2加載事件
我localStorage的數據:
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。那麼我怎樣才能把它加載到我的fullcalendar?應用上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;
});
感謝您的幫助,我想存儲新事件到局地存儲也是如此。所以我只是不知道如何創建功能,將骨幹收集中的新事件添加到fullcalendar中。我已經添加了[GIT](https://github.com/makromat/calBB)... – Makromat 2014-09-22 14:33:50
因此,您可以讓事件或eventSources(如果您需要多個源)成爲返回您的事件的函數想要顯示或者說完全的日曆請求。函數簽名看起來像這樣:函數(開始,結束,時區,回調)'並記錄[這裏](http://fullcalendar.io/docs/event_data/events_function/) – 2014-09-22 23:55:52
我也認爲它至少是打算在通過'new Events([event1,event2,...])創建集合之前,通過'new Event({...})'將原始數組中的每個項目轉換爲'' – 2014-09-23 00:03:05