Loading fullcalendar events from a backbone collection breaks the next & previous functions

Question

noob coder here.

I'm having trouble linking fullcalendar to backbone.js. My problem arises when I use the 'previous' and 'next' buttons on fullcalendar to navigate.

Here is the bug: I make a new event. The event shows up on the calendar. I press 'next'. I press 'previous'. The new event has disappeared.

It looks like fullcalendar expects an 'events' option on loading to specify a function or JSON feed to load events from. According to the docs, "FullCalendar will visit the URL whenever it needs new event data. This happens when the user clicks prev/next or changes views."

I'm having a surprising amount of difficulty getting fullcalendar to ask Backbone for a JSON object of the events collection(that stores all the events).

I've tried using events: function() {events.toJSON();} and events: function() {events.fetch();} with no luck. Help is very much appreciated.

Here is my backbone code:

$(function(){
    var Event = Backbone.Model.extend();

    var Events = Backbone.Collection.extend({
        model: Event,
        url: 'events'
    }); 

    var EventsView = Backbone.View.extend({
        initialize: function(){
            _.bindAll(this); 

            this.collection.bind('reset', this.addAll);
            this.collection.bind('add', this.addOne);
            this.collection.bind('change', this.change);            
            this.collection.bind('destroy', this.destroy);

            this.eventView = new EventView();            
        },
        render: function() {
            this.el.fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay'
                },
                selectable: true,
                selectHelper: true,
                editable: true,
                ignoreTimezone: false,                
                select: this.select,
                defaultView: 'agendaWeek',
            //  events: function() {events.toJSON();},
                eventClick: this.eventClick,
                eventDrop: this.eventDropOrResize,        
                eventResize: this.eventDropOrResize
            });
        },
        addAll: function() {
            this.el.fullCalendar('addEventSource', this.collection.toJSON());
        },
        addOne: function(event) {
            this.el.fullCalendar('renderEvent', event.toJSON());
        },        
        select: function(startDate, endDate) {
            this.eventView.collection = this.collection;
            this.eventView.model = new Event({start: startDate, end: endDate});
            this.eventView.render();            
        },
        eventClick: function(fcEvent) {
            this.eventView.model = this.collection.get(fcEvent.id);
            this.eventView.render();
        },
        change: function(event) {
            // Look up the underlying event in the calendar and update its details from the model
            var fcEvent = this.el.fullCalendar('clientEvents', event.get('id'))[0];
            fcEvent.title = event.get('title');
            fcEvent.color = event.get('color');
            this.el.fullCalendar('updateEvent', fcEvent);           
        },
        eventDropOrResize: function(fcEvent) {
            // Lookup the model that has the ID of the event and update its attributes
            this.collection.get(fcEvent.id).save({start: fcEvent.start, end: fcEvent.end});            
        },
        destroy: function(event) {
            this.el.fullCalendar('removeEvents', event.id);         
        }        
    });

    var EventView = Backbone.View.extend({
        el: $('#eventDialog'),
        initialize: function() {
            _.bindAll(this);           
        },
        render: function() {
            var buttons = {'Ok': this.save};
            if (!this.model.isNew()) {
                _.extend(buttons, {'Delete': this.destroy});
            }
            _.extend(buttons, {'Cancel': this.close});            

            this.el.dialog({
                modal: true,
                title: (this.model.isNew() ? 'New' : 'Edit') + ' Event',
                buttons: buttons,
                open: this.open
            });

            return this;
        },        
        open: function() {
            this.$('#title').val(this.model.get('title'));
            this.$('#color').val(this.model.get('color'));            
        },        
        save: function() {
            this.model.set({'title': this.$('#title').val(), 'color': this.$('#color').val()});

            if (this.model.isNew()) {
                this.collection.create(this.model, {success: this.close});
            } else {
                this.model.save({}, {success: this.close});
            }
        },
        close: function() {
            this.el.dialog('close');
        },
        destroy: function() {
            this.model.destroy({success: this.close});
        }        
    });

    var events = new Events();
    new EventsView({el: $("#calendar"), collection: events}).render();
    events.fetch();
});

Radonculous Radonculous · Accepted Answer · 2012-01-06T19:18:10

After looking at this problem forever I realized that I was adding the appointment(model) to the collection and calling renderEvent() without the [,stick] flag equal to true. This made my appointments disappear when pressing the next/back button.

http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/

From the documentation: "http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/"

"Normally, the event will disappear once the calendar refetches its event sources (example: when prev/next is clicked). However, specifying stick as true will cause the event to be permanently fixed to the calendar."

Loading fullcalendar events from a backbone collection breaks the next & previous functions

1 Answers