jQuery FullCalendar - Event Description with Modal Pop-up

by Mike on Tuesday Oct 30, 2012  

The other day I wrote about how to filter events from a JSON feed for jQuery 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, and a few lines of code. In addition to the FullCalendar script, you’ll also need  jQuery UI.

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 modal window instead.

To make this 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>
</div>

 

Step 2: Add the JavaScript: Overwrite the default url on initialization. On page load, we initialize the calendar with this function:

function loadCal() {
    $('#calendar').fullCalendar({
        events: source,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: ''
        },
        eventRender: function (event, element) {
            element.attr('href''javascript:void(0);');
            element.attr('onclick''openModal("' + event.title + '","' + event.description + '","' + event.url + '");');
        }
 
    });
}

 

We clear out the href for the event with a javascript:void(0) and give it an onclick event for the modal window. In this example, we pass it three variables – the event title, description, and url. The openModal function is:

function openModal(title, info, url) {
    $("#eventInfo").html(info);
    $("#eventLink").attr('href', url);
    $("#eventContent").dialog({ modal: true, title: title });
}

 

That’s it! You can customize the pop-up however you wish.
 


tags: jQuery, fullCalendar, events, calendar, modal, dialog