Can't access jquery obj

full-calendar.js

import Ember from "ember";

export default Ember.Component.extend({
  attributeBindings: ['id'],
    id: 'calendar',
    setEvents:function (){
      var events = this.get("theEvents");
      var arr = []
      events.forEach(function(e,i,enumerable){
        arr.push({
          id: e.get('id'),
          title: e.get('title'),
          start: e.get('start'),
          color: e.get('color'),
          allDay: true
        })
      });
      console.log({events:arr});
      $('#calendar').fullCalendar('addEventSource',{events:arr}); //this.$() doesn't work as well
    }.observes("theEvents.content","theEvents.isFulfilled").on('init'),
    _initializeCalendar: function() {
      var self = this;
      $("#calendar").fullCalendar({ //can't use this.$() here as well...
        lang: 'de',
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        weekends: false,
        dayClick: function(date) {
          self.sendAction("dayClick",date);
        },
      });
    }.on('didInsertElement')
});