I need to pass JSON to jquery-fullcalendar and though I can pass use url as the source from which to fetch the JSON, I would prefer to convert data already loaded into ember-data store to JSON and pass it to fullcalendar, so any changes made on the calendar or on ember would always be in sync.
When I use ember object as the model and create the data in memory,it works as shown here: here. But when I load data via ember-data rest-adapter and try to convert it to JSON using thesame code it fails.
Here is the failing JSfiddle.
When using ember object to create the data I can get it to work by manually creating the json as shown here and pasted below:
When I use Ember object as the model, it generates a valid JSON which accepted by fullcalendar. However, if I change it to to use ember-data model ie, App.Event = DS.Model.extend and change the attributes accordingly to use DS.attr, while the controller remains thesame, it will fail to generate valid json accepted by fullcalendar.
App.Event = Em.Object.extend( {
title: null,
start: null,
allDay: null,
asJSON: function() {
return {
title: this.get('title'),
start: this.get('start'),
allDay: this.get('allDay')
};
}.property('title', 'start', 'allDay')
});
The controller that works when using ember object but doesn't when using ember-data
App.EventsController = Ember.ArrayController.extend({
content: [
App.Event.create({
title: 'event1',
start: '2013-06-06'
})
],
contentAsJSON: function() {
return this.get('content').map(function(event) {
return event.get('asJSON');
});
}.property('content.[]')
});
This is how I pass the generated JSON from the above model and controller to jquery-fullcalendar. Here the json is recognised by fullcalendar and the events displayed on the calendar. You can see it here.
App.CalendarView = Em.View.extend({
templateName: 'calendar',
didInsertElement: function() {
this._super();
var controller = this.get('controller');
var calendarJSON = controller.eventJSON();
console.log(calendarJSON);
this.$().fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
} ,
editable: true,
events: calendarJSON
});
}
});
How do I do I generate json if i convert the ember-object to ember-data's DS model. So far just swapping out ember object for ember-data is not working.
Update
Working jsfiddle based on the answer by @Gevious.
Adjusted the working code by @Gevious, so it will display only one calendar instead of multiple: The jsfiddle
Final working answer
I moved the didInsertElement and initialization of jquery fullcalendar from the controller back into the views and everything still works the way i want it to.
With Ember-data as datastore: http://jsfiddle.net/C4SD7/5/ and http://jsfiddle.net/C4SD7/3/. With Ember-Model as Data store: http://jsfiddle.net/C4SD7/6/ Beside fullcalendar, here is a link for using datepicker with emberjs: http://jsfiddle.net/jsjyw/3/. Using Momentjs with the calendar: http://jsfiddle.net/M8XLF/7/ and changing the colours of fullcalendar: http://jsfiddle.net/A56LN/43/. Events sideloading appointment using ember-model as datastore: http://jsfiddle.net/duHfN/15/. Thesame code using ember-data as datastore: http://jsfiddle.net/duHfN/14/
Many thanks.
