I'm using the fullCalendar jQuery plugin right now and I'm planning to apply the Twitter Modal Bootstrap on eventClick. How do I apply this method for my calendar plugin? Thanks in advance!

I'm using the fullCalendar jQuery plugin right now and I'm planning to apply the Twitter Modal Bootstrap on eventClick. How do I apply this method for my calendar plugin? Thanks in advance!

• javascript
• fullcalendar

2 Answers 2

You can acplish that by doing something like:

eventClick: function(event) {
    var modal = $("#modal");
    modal.find(".modal-title").html(event.title);
    modal.modal();
}

For plete code and functionality see the following jsfiddle

I just saw this question and I thought this may help someone. This code worked for me:

$(document).ready(function() {
var $calPopOver;
$('#calendar').fullCalendar({
    defaultDate: '2015-07-23',
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    eventMouseover: function (date, allDay, jsEvent, view) {
        $(this).children().popover({
            title: '<p>Lorem ipsum dolor sit amet</p>',
            placement: 'right',
            content: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
            html: true,
            container: 'body'
        });
        if($calPopOver)
            $calPopOver.popover('destroy');
        $calPopOver = $(this).children().popover('show');
    },
    eventLimit: false, // allow "more" link when too many events
            events: [
            {
                title: 'All Day Event',
                start: '2015-07-04'
            },
            {
                title: 'Long Event',
                start: '2015-07-18',
                end: '2014-07-19'
            },        
            {
                title: 'Click for Google',
                url: 'http://google./',
                start: '2015-07-23'
            }
        ]
}); });

To get the hover effect you can change from "eventClick" to "eventMouseover"

http://jsfiddle/MadalinaTn/1Lmejhmx/2/