Using ember addon with new ember

Hello, I am trying to integrate a calendar component in a new ember app and I am having troubles with both addons I am experimenting with. I am looking at ember-calendar and ember-fullcalendar.

Both addon currently do not seem to work out of the box with ember 3.15 even though I ve used them in older project. Is there any way to make things that work the old way work in the new Ember?

While troubleshooting the ember-fullcalendar, one of the problems was import Ember from 'ember';

I read that installing ember-cli-shims can fix the problem but did not work for me.

Does this mean we need to rollback to older version of ember to use this addons?

We could not use Ember 3.13+ until the Array Proxy was fixed by #18703. I can imagine a calendar component depends on this too. The fix will be back ported to Ember 3.16 so between Ember 3.13+ and 3.16.1- Ember will not work.

Try the Canary URL https://github.com/ember-cli/ember-source-channel-url

If it is not the Array Proxy things like this: https://github.com/lazybensch/ember-cli-filter-by-query/commit/865281f1878ebf0db59e6670b05596dfd8c2be16 I find need to change.

I really need to get around to properly publishing this, but I wrote a new fullcalendar plugin since the current one is abandoned:

You should be able to import this using the git address directly for now. I haven’t tested this extensively with newer versions of ember myself, but it is a much lighter plugin, meaning you should have greater control and direct access to the fullcalendar API with plain old JS. Go ahead and give it a spin, feel free to ask me if you have questions (still writing docs). For now the best implementation examples can be found in the tests.

1 Like

This worked well for me so far so good and it seems to load faster than the old version.

Thanks for the work.

1 Like

great, glad to hear it!

the styles on the timeGridWeek, timeGridDay and listWeek seems to be off. Do I need to import and css files?

Yeah, here’s the lines we have in our ember-cli-build.js:

    app.import('node_modules/@fullcalendar/daygrid/main.css');
    app.import('node_modules/@fullcalendar/timegrid/main.css');

That did the trick. thanks again.

No problem, went ahead and published the package as well as writing up some documentation: https://www.npmjs.com/package/@mariana-tek/ember-fullcalendar

Thanks for inspiring me to get around to this!

I can recommend Ember Power Calendar if you are open to alternatives. It’s a highly used ember addon. It’s among the top 100 addons ranked by usage. It’s well maintained since years and has great documentation. An Ember Observer score of 9.8: https://emberobserver.com/addons/ember-power-calendar It’s in datepicker and not calendar category. You might have missed it therefore.