Originally published at welchcanavan.com

TL;DR: a new ember-fullcalendar addon based on Fullcalendar v4 is released this week. Here is some of my process and experience.

Backstory

My day job is working on a large SaaS application at Mariana Tek. We help boutique gyms with their business operations, which means our application serves a lot of purposes: point of sale, time clock, class scheduler, and a lot more. Having to write all this functionality from scratch would be difficult if not impossible, so I'm grateful for plugins in general and Ember's painless addon system in particular.

While our application is on an earlier version Ember 3, we're in the process of a long walk to the exciting Ember Octane. Part of this process has been gradually updating our addons. Our application, which is over four years old, had accrued some addons that are now abandoned. Most of these were easy to address, with one big exception - Fullcalendar. Fullcalendar is a fantastic tool that allows the user to provide a fully-featured scheduling calendar (e.g. Google Calendar) with minimal code. The Ember Fullcalendar addon hadn't been updated in over a year and I really didn't want to write a calendar from the ground up. The writing was on the wall; I was going to have to write my first Ember addon.

Well, not quite...

In actuality, my first inclination was to see if I could chip in with the current Ember Fullcalendar plugin, but I found that Fullcalendar had done a major upgrade moving from version 3 to version 4; having removed jQuery and Moment as dependencies, and updated their API. If I wanted to fully get rid of jQuery as a dependency in our app it seemed I would have start from scratch.

Inspiration

If I couldn't improve the current addon or use it as a guide for my new addon then what could I look at? For the Ember side of things I went to Ember Observer, a great resource for finding quality addons. I read through some of the popular addons that provide a similar service (bindings to a popular Javascript UI utility). This provided some hints and ideas for structure, but I still needed some ideas for the Fullcalendar side of things. I thought I'd take a peek at the fullcalendar-react package and was pleasantly surprised to find that it barely breaks fifty lines of code.

fullcalendar-react provided the idea to avoid explicit bindings for each property or attribute and simply batch updates and pass them along to Fullcalendar. componentDidMount() becomes didInsertElement(), while componentDidUpdate() becomes didUpdateAttrs(). This makes the addon easier to maintain as I can upgrade its Fullcalendar dependency version with minimal updates to the addon's code. The Ember best practice of Data Down, Actions Up aligns well with React's philosophy and if you account for differences in each framework's API many patterns are easily transferable.

Try it out

The addon can be installed using ember install @mariana-tek/ember-fullcalendar. You can find further instruction in the documentation.

Please feel free to check out the source code or report an issue. Enjoy!

Acknowledgement

Thanks to my employer for the support in making this! If you think you'd like to work on a kind and supportive team that talks Ember, React, and—above all—Javascript, please check us out.