jQuery component

1

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

this.$().fullCalender

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() {
    $('.jquerycal').fullCalendar({
      events: this.get('events')
  },
  willDestroyElement() {
    $('.jquerycal').fullCalendar().destroy();
  }
});

component template:

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

I noticed that …

$().fullCalendar

… without an selector will also not work.

I included fullcalender with app.import:

app.import('vendor/plugins/fullcalendar/fullcalendar.min.js');
2

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?

3

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…

4

Few thoughts;

  1. If you’re on a newer version of ember, do you have the jQuery integration enabled? ember-new-output/optional-features.json at v3.4.0 · ember-cli/ember-new-output · GitHub

  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…) Component - 3.5 - Ember API Documentation

  4. If you’re using https://fullcalendar.io/, then you might find this ember addon useful :wink: Ember Observer