Backbone and Full Calendar

My current project, Training Sleuth, involves scheduling and keeping track of various training events.  While not strictly necessary, I’m fairly certain potential users are going to want to view all of the events they’ve painstakingly entered into the app in a nice familiar calendar format.

I’m using Backbone for my application’s front-end (which interacts with a REST backend written in Scala), and unfortunately I couldn’t find a javascript calendar library that was designed to work with backbone out of the box.  I briefly toyed with the idea of creating my own, but quickly rejected the idea when I realized such a thing would be a project unto itself, and would just serve as a distraction to getting my current app finished.  The next best thing to Backbone-Calendar, of course, would be a well-designed, highly configurable calendar that’s flexible enough to be used with just about anything.  Full Calendar is just such a library, and also happens to be widely used (and surprisingly well documented for an open source javascript library, perhaps that’s why it’s widely used).

FC is based on ‘event‘ objects, and provides several different mechanisms for feeding events to the calendar.  For integrating FC’s event objects with my Backbone app, I used FC’s custom events function to translate between Backbone models and FC event objects.  The events method is called whenever FC needs more event data (for example, when the user is paging through months).

Here’s one of my view methods that renders a calendar, and defines my ‘events’ method (warning for Javascript purists: I use Coffeescript, and yes, I realize this means we can’t be friends):

renderCalendar: ->
      @.$("#calendar").fullCalendar({
        header: {
          left: 'prev,next today'
          center: 'title'
          right: 'month,basicWeek,basicDay'
        }
        allDayDefault: false
        editable: false
        events: (start, end, callback) ->
          new EventList().fetch({
            data: {
              from: start.getTime()
              to: end.getTime()
            }
            success: (eventList) ->
              events = []
              events = _.map(eventList.models, (event) -> {
                title: event.get("title")
                start: new Date(event.get("start"))
                end: new Date(event.get("end"))
                url: event.get("url")
              })
              callback(events)
          })
      })

EventList is a fairly vanilla Backbone Collection that fetches event data (training session date/time, etc.) from my back-end REST service (the data object in the fetch statement defines the date/time range for which I’m requesting event data).  In all, it was surprisingly… easy.  I overrode the default CSS a bit to match the rest of my UI (I’m using Bootstrap 3), and the result doesn’t look half bad (IMHO):

fc_screenshot

2 thoughts on “Backbone and Full Calendar

  1. Thanks, this was exactly what I needed! All other tutorials of Backbone + FullCalendar don’t account for the start/end range and request all events from the backend.

    Like

  2. One important adjustment, I had to convert the moment object to a Javascript date object to get the getTime() function to work.
    data: {
    from: start.toDate().getTime(),
    to: end.toDate().getTime()
    }, //data

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s