Extend FullCalendar Events with Bootstrap Modal

Download the example on GitHub: Node.js Example or if you don't do node, the HTML Example. The Node.js examples include a demo using Google Calendar as the event source.

Two years ago I wrote how to use jQuery UI with FullCalendar to create a modal popup when you click on an event. Seeing as how many people use Bootstrap, here is how to do the same using the Bootstrap Modal. Note: You can use this example if you don't use Bootstrap!

This FullCalendar example covers a few things:

  1. Replacing the default click for a calendar event (it's normally an href to the event page) and instead open a Bootstrap modal window with more information about the event
  2. How to use a JSON feed as the events source
  3. How to leverage the Bootstrap modal even if you aren't using Bootstrap


Add the modal markup

So first we want to add the modal markup. This is almost verbatim from the Bootstrap example page. You can configure this however you need. The only thing I added were id fields so we could easily change values with jQuery, as well as a link that points to the event page.

<div id="fullCalModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
                <h4 id="modalTitle" class="modal-title"></h4>
            </div>
            <div id="modalBody" class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button class="btn btn-primary"><a id="eventUrl" target="_blank">Event Page</a></button>
            </div>
        </div>
    </div>
</div>

Now let's initialize the FullCalendar and have it use that modal! You can customize the modal code above and the code in the eventClick function however you need, passing in any parameters (including any custom fields in your JSON feed -- this example uses a custom field description).

$(document).ready(function() { 
    $('#bootstrapModalFullCalendar').fullCalendar({
        events: '/hackyjson/cal/',
        header: {
            left: '',
            center: 'prev title next',
            right: ''
        },
        eventClick:  function(event, jsEvent, view) {
            $('#modalTitle').html(event.title);
            $('#modalBody').html(event.description);
            $('#eventUrl').attr('href',event.url);
            $('#fullCalModal').modal();
        }
    });
});

That's pretty much it. You can customize JavaScript, the modal, and even your JSON feed with whatever fields you want to display to make it be exactly what you need.

The JSON Feed

If you look at the JSON Feed, you'll see some of the typical FullCalendar fields, plus one we added to help the demo run: description. You can add, and then use, any custom fields you want. If you want details on how to build JSON feeds in node.js, let me know in the comments, or check out a C# example if you are a .NET guy.

Using it Without Bootstrap

If you already use Bootstrap on your site, you probably don't need this info.

You can easily generate the necessary CSS and JS files at Bootstrap's Customize and download page. Just toggle all the other options off and check the Modal check boxes. That way you can use this if you aren't using Bootstrap on your site. This example page used these files.

Necessary JavaScript

Here is an example of the scripts I use to make the demo work. These are below my footer (above the </body>). Immediately following these scripts is the above example code that initializes the fullCalendar.

As mentioned before, if you are already using a Bootstrap build that includes the Modal stuff, then you don't need that last script. If you aren't using Bootstrap, follow the directions in Using it Without Bootstrap or use this javascript and css, which is what this example page uses.

<script src="//code.jquery.com/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script> 
<script src="/shared/js/bootstrapmodal.min.js"></script>