jQuery component

It is recommended to insert jQuery elements like this in a component:


I tried this but always get “fullcalendar is not a function”.

If inserted without ‘this’, it’s working as expected:

component JS:

export default Component.extend({
  didInsertElement() {
      events: this.get('events')
  willDestroyElement() {

component template:

<div class="jquerycal"></div>

I noticed that …


… without an selector will also not work.

I included fullcalender with app.import:


I think it’s fine to use $('.jquerycal').fullCalendar(), especially if you gets you unstuck.

Are you using import $ from 'jquery' at the top of your component to get access to jquery?

I do the import in ember-cli-build.js. Yes, it helps to get unstuck, but leaves me with the feeling that “something is not working correctly”. I try to follow guides and recommendations as close as possible, but I did not get it to work as proposed. I’d be glad if you have any ideas how to debug that…

Few thoughts;

  1. If you’re on a newer version of ember, do you have the jQuery integration enabled? https://github.com/ember-cli/ember-new-output/blob/v3.4.0/config/optional-features.json#L2

  2. What @ryanto is mentioning is that you should import $ from 'jquery'; in your component.js file as well to avoid linting errors (when using option B).

  3. If you do go down the $('.jquerycal').fullCalendar() route, ensure to pass in the components element to limit the scope, or else you might get memory leaks from it setting up other calendars outside the components template. Ex: $('.jquerycal', this.element).fullCalendar() (Basically what this.$() is…) https://emberjs.com/api/ember/3.5/classes/Component/properties/element?anchor=element

  4. If you’re using https://fullcalendar.io/, then you might find this ember addon useful :wink: https://www.emberobserver.com/addons/ember-fullcalendar