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.
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> </div>
We clear out the href for the event with a
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.