Time for a calendar plugin…again!

Seldom does a project go by with some form of need for date handling. I suppose that will always be the case as long as time marches on. Anyway my for my most recent project the calendar function was/is the central player.

I needed it to:

• Import events from the database as accepted
• Allow the user to click on the day/event and bring up a popup window (modal)
• Provide different period views
• Be easy to work with

I settle on FullCalendar.io for this latest project on the recommendation of classmates. They’d used it successful for a project they’d done previously.

Install was pretty simple. You can add additional @fullcalendar grids to your initial install or subsequently.

This brought in the dependencies straight into the package.json file. You’ll see that I’ve added the timegrid also subsequently.

The lines added to the package json

The import components are also pretty straightforward as is generally the case with React imports.

Some or all of lines you’d add into the React components

I chose to add the interactionPlugin. As the time of writing I’m still struggling with how to get it to work the way I’d like. We’ll see how it comes out.

However in plain vanilla form its pretty simple to implement.

You map over your array, format your data, call the FullCalendar app and it does the rest. There are also plenty of additional props that you can send down which can be a help or a hinderance, depending on your experience.

And they actually show you what your import data should look like…this saves you hours and days of trial and error, working out what on earth this app is expecting you to build for it to receive. I can’t tell you the number of times…but I digress.

Simple data file, but worth it’s weight

I was able to get the content injection working pretty quickly, then things sort of slowed down. The options are varied and the documentation is very dense.

Just a snapshot of the documentation of options

Working with dates, but more so time is a pain. There are so many variations. Some against absolute time, some against relative time……

So let split be your friend.

So the initial data injection can be achieved pretty quickly.

There was test events created in another component outside of the calendar. When the user accepts more events then it’s pretty easy to have more events come in and populate.

I’d like to do more with it but that will take a greater investment of time. Perhaps later in this or on another project.

How did FullCalendar.io performa against the expectations I’d identified at the beginning? Well the jury is still out, but here are my initial evaluations.

As to what my final product looks like, I’ll come back and drop it in the article after I’ve finished the project. I may also need to update the scores at that time also.