EmberJS view being rendered twice

Question

New to ember and trying to figure out best practices. Issue is fullCalendar is rendering two calendars when I switch to the calendar template.

Here is the console output:

Attempting transition to calendar ember.js?body=1:3499
Transition #3: calendar: calling beforeModel hook ember.js?body=1:3499
Transition #3: calendar: calling deserialize hook ember.js?body=1:3499
Transition #3: calendar: calling afterModel hook ember.js?body=1:3499
Transition #3: Resolved all models on destination route; finalizing transition. ember.js?         body=1:3499
Rendering calendar with <app@view:calendar::ember635> Object {fullName: "view:calendar"}         ember.js?body=1:3499
Transitioned into 'calendar' ember.js?body=1:3499
Transition #3: TRANSITION COMPLETE. 

Here is my code:

router.es6

var Router = Ember.Router.extend({
  location: 'history'
});

Router.map(function() {
  //...
  this.route('calendar');
  //...
});

export default Router; 

routes/calendar.es6

export default Ember.Route.extend();

views/calendar.es6

var CalendarView = Ember.View.extend({
  didInsertElement: function() {
    $('#calendar').fullCalendar();
  }
});

export default CalendarView;

templates/calendar.hbs

{{#view "calendar"}}
  <nav>
    <h1>Schedule</h1>
  </nav>
  <article id="schedule">
    <section>
      <div id='calendar'></div>
    </section>
  </article>
{{/view}}

Answer 1

This question actually ended up being a repeat and was a fullCalendar thing apposed to an ember thing. What worked for me was adding the jquery-once plugin and calling it like this

$('#calendar').once('calendar').fullCalendar();

SO reference: Fullcalendar: why is the calendar appearing twice on the page?