jQuery FullCalendar - Event Description with Modal Pop-up

Download the example on GitHub: Node.js Example or if you don't do node, the HTML Example

Use Bootstrap? Check out the Bootstrap example instead.

The other day I wrote about how to filter events from a JSON feed for FullCalendar. Another feature I wanted out of FullCalendar was the ability to click on an event and get a pop-up window with details about the event.

Adding a modal pop-up to FullCalendar is actually a very easy thing to do, and only requires two things: a custom field that will hold the extra information (this part isn't even required... just nice), and a few lines of code. In addition to the FullCalendar script, you’ll also need jQuery UI. If you are using Bootstrap, it'd be better to follow my Bootstrap example.

View Demo

The default action of FullCalendar is to hyperlink each event to take you to a url for that specific event. Here is how to bypass that and use a jQuery UI dialog instead.

To make this specific example work, your events source will need to use a custom field, in this case a description field. View JSON feed. See the FullCalendar documentation for the event object for more information.

The description field is what will contain the extra information about your event. Keep the URL field with the actual URL for the event. It will be used to include a link to the event in the popup window. Once you have a description field for your event source, you are ready to go.

Step 1: Add a hidden placeholder div on your page:

<div id="eventContent" title="Event Details">
    <div id="eventInfo"></div>
    <p><strong><a id="eventLink" target="_blank">Read More</a></strong></p>

Step 2: Add the JavaScript: On page load, we initialize the calendar with this function:

    events: source,
    header: {
        left: '',
        center: 'prev title next',
        right: ''
    eventClick:  function(event, jsEvent, view) {
        //set the values and open the modal
        $("#eventLink").attr('href', event.url);
        $("#eventContent").dialog({ modal: true, title: event.title });

We give the event a click event -- in this example, we use the event title, description (remember, this is a custom field), and url values in our hidden div and then launch the dialog. You can use any other fields you have, like start and end times, or any custom fields you add in your feed.

That’s it! You can customize the pop-up however you wish. In fact, the DEMO is a little different and it includes start and end times.