# jQuery component

**URL:** <https://discuss.emberjs.com/t/jquery-component/15634>\
**Category:** Uncategorized\
**Created:** [October 11, 2018, 9:02pm UTC](https://discuss.emberjs.com/t/jquery-component/15634 "2018-10-11T21:02:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![brx](https://avatars.discourse-cdn.com/v4/letter/b/ad7895/32.png) [@brx](https://discuss.emberjs.com/u/brx)\
**Post date:** [October 11, 2018, 9:02pm UTC](https://discuss.emberjs.com/t/jquery-component/15634/1 "2018-10-11T21:02:36Z")

</div>

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');

```

---

<div class="post-metadata">

**Author:** ![ryanto](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ryanto/32/13850_2.png) [@ryanto](https://discuss.emberjs.com/u/ryanto)\
**Post date:** [October 12, 2018, 1:46am UTC](https://discuss.emberjs.com/t/jquery-component/15634/2 "2018-10-12T01:46:36Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![brx](https://avatars.discourse-cdn.com/v4/letter/b/ad7895/32.png) [@brx](https://discuss.emberjs.com/u/brx)\
**Post date:** [October 12, 2018, 9:05am UTC](https://discuss.emberjs.com/t/jquery-component/15634/3 "2018-10-12T09:05:32Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![Panman8201](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/panman8201/32/17727_2.png) [@Panman8201](https://discuss.emberjs.com/u/Panman8201)\
**Post date:** [October 12, 2018, 3:16pm UTC](https://discuss.emberjs.com/t/jquery-component/15634/4 "2018-10-12T15:16:47Z")

</div>

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](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…) [Component - 3.5 - Ember API Documentation](https://emberjs.com/api/ember/3.5/classes/Component/properties/element?anchor=element)

4. If you’re using [https://fullcalendar.io/](https://fullcalendar.io/), then you might find this ember addon useful 😉 [Ember Observer](https://www.emberobserver.com/addons/ember-fullcalendar)