FullCalendar with Event Modal Dialog Example



This demo shows how to have a jQuery UI modal dialog on event-click when using FullCalendar. Also in the example, it is shown how to use a JSON feed as the event source. The demo uses jQuery, jQuery UI, FullCalendar, and Moment.js.

I also have a demo using Bootstrap Modal.



This FullCalendar example uses a custom field in the JSON named description to provide more information for the modal dialog. The good thing to know is, you can add and use any custom field you want.

Add a hidden div to the page that will be the placeholder for the jQuery dialog. You can customize this as needed (including with your custom fields in the JSON feed!). This version differs from the blog in that it uses a start and end time.

<div id="eventContent" title="Event Details" style="display:none;">
    Start: <span id="startTime"></span><br>
    End: <span id="endTime"></span><br><br>
    <p id="eventInfo"></p>
    <p><strong><a id="eventLink" href="" target="_blank">Read More</a></strong></p>
</div>

On page load, initialize the calendar. We will overwrite the default url for the event and replace it with the jQuery dialog code. The eventRender is where the fun happens:

$('#calendar').fullCalendar({
    events: source,
    header: {
        left: '',
        center: 'prev title next',
        right: ''
    },
    eventRender: function (event, element) {
        element.attr('href', 'javascript:void(0);');
        element.click(function() {
            $("#startTime").html(moment(event.start).format('MMM Do h:mm A'));
            $("#endTime").html(moment(event.end).format('MMM Do h:mm A'));
            $("#eventInfo").html(event.description);
            $("#eventLink").attr('href', event.url);
            $("#eventContent").dialog({ modal: true, title: event.title, width:350});
        });
    }
});

Leave questions and comments on the original blog post.