Skip to content

Instantly share code, notes, and snippets.

@caleywoods
Created January 24, 2012 14:57
Show Gist options
  • Save caleywoods/1670554 to your computer and use it in GitHub Desktop.
Save caleywoods/1670554 to your computer and use it in GitHub Desktop.
Backbone JS / Fullcalendar
$ ->
Event = Backbone.Model.extend()
Events = Backbone.Collection.extend({
Model: Event,
url : 'events'
})
EventsView = Backbone.View.extend({
initialize: ->
_.bindAll this
@.collection.bind 'reset', @.addAll
@.collection.bind 'add', @.addOne
@.collection.bind 'change', @.change
@.collection.bind 'destroy', @.destroy
@.eventView = new EventView()
},
render: ->
@.el.fullCalendar({
header:
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
selectable: true,
selectHelper: true,
editable: true,
ignoreTimezone: false,
select: @.select,
eventClick: @.eventClick,
eventDrop: @.eventDropOrResize,
eventResize: @.eventDropOrResize
});
},
addAll: ->
@.el.fullCalendar 'addEventSource', @.collection.toJSON()
,
addOne: ->
@.el.fullCalendar 'renderevent', event.toJSON()
,
select: (startDate, endDate) ->
@.eventView.collection = @.collection
@.eventView.model = new Event {start: startDate, end: endDate}
@this.eventView.render()
$(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,
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();
});
@kenbudgell
Copy link

Just found this after searching for full calendar and backbone js. Great code, I appreciate you sharing it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment