How to add a JavaScript calendar to your app
Tags: javascript, fullcalendar, json, ajax
Published: 2022-06-21 12:04:18

I recently got it into my head that I wanted to figure out how I would write a "time-off calendar".  Feature zero of any time-off calendar tends to be the calendar itself.  Today, I figured that we would look at one option for that.

I combed through the assorted google results and found a promising looking solution called [FullCalendar](https://fullcalendar.io/).  It advertises itself as working with [React](https://dev.to/t/react), [Vue](https://dev.to/t/vue), [Angular](https://dev.to/t/angular), or just plain [javascript](https://dev.to/t/javascript).  For today's post, we are going to be looking at their vanilla-javascript, 100% framework agnostic solution.

Let's start by looking at [the absolutely, most basic example of a monthly calendar](https://codepen.io/steinbring/pen/abqRdXW) with the library.

{% codepen https://codepen.io/steinbring/pen/abqRdXW %}

You will notice that we are waiting for the DOM to load, using `document.getElementById()` to identify the element that is going to contain the calendar, and then we are using that new `calendarEl` element to render the calendar.  We are defining an [initialView](https://fullcalendar.io/docs/initialView) of 'dayGridMonth' but there are the alternate options 'dayGridWeek', 'timeGridDay', or 'listWeek'.

There are a lot more options that you can apply to a calendar, beyond just [initialView](https://fullcalendar.io/docs/initialView).  For [our next example](https://codepen.io/steinbring/pen/bGLmqoQ), let's check out [weekends](https://fullcalendar.io/docs/weekends) and [headerToolbar](https://fullcalendar.io/docs/headerToolbar).

{% codepen https://codepen.io/steinbring/pen/bGLmqoQ %}

By setting `weekends` to false, we are getting closer to the "time-off calendar" vibe and the `headerToolbar` value allows us to both make the calendar look less "standard" and expose the "month", "week", and "day" toggles.  The [toolbar](https://fullcalendar.io/docs/toolbar) has a heck of a lot more options, too.

So, the next step is to populate the calendar with actual events.  In our next example, [we are directly populating an "events" object with an array of events](https://codepen.io/steinbring/pen/ExQdWQy).  

{% codepen https://codepen.io/steinbring/pen/ExQdWQy %}

When creating an event, [there are a lot of options available](https://fullcalendar.io/docs/event-object).  For this example, we are going to keep it pretty basic, though.  We have two multi-day events and two single-day events.  Each event has a unique ID, a title, a start, and a background color.  The multi-day events also have an end.  The start and end values take a [date object](https://fullcalendar.io/docs/date-object) and can include a time.

For [our final example](https://codepen.io/steinbring/pen/qBxJrQj), we are going to look at how pull in the event data from [a JSON endpoint](https://gist.githubusercontent.com/steinbring/80157cc5866de53c8cd975a1673f4425/raw/72d8dfb2880b76ffbd7bb8a48f3803aab3b804ba/events.json).  Instead of creating an actual back-end for this thing, I just spun something up using [GitHub Gist](https://gist.github.com/steinbring/80157cc5866de53c8cd975a1673f4425).  Of course, I would recommend using something like [Laravel](https://blog.jws.app/tag/laravel/) or [Firebase](https://firebase.google.com/) for an actual back-end. 

{% codepen https://codepen.io/steinbring/pen/qBxJrQj %}

As you can see, adding a JSON feed instead of an object as a value for "events" is all that is needed.  There are [a lot more options available](https://fullcalendar.io/docs/event-source-object), though.  You can even use an [iCalendar feed](https://fullcalendar.io/docs/icalendar) instead of a [JSON feed](https://fullcalendar.io/docs/events-json-feed).

So, what's next?  Next week, there will be a follow-up on how to do the same thing, using [vue.js](https://blog.jws.app/tag/vue-js/).  After that, I intend to show how to incorporate [Laravel](https://dev.to/t/laravel) into the picture.  If you want to follow along, I suggest [following me on here](https://dev.to/steinbring) and checking out [my other blog](https://blog.jws.app/).  Until then, please feel free to leave a comment if you have any questions, comments, etc.