CODEWITHSUNDEEP
javascriptfullcalendar
cartmander
cartmander

Reputation: 182

How do you apply twitter modal popup on fullcalendar event click

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!

Upvotes: 1

Views: 3009

Answers (2)

Madalina Taina
Madalina Taina

Reputation: 1978

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.com/',
                start: '2015-07-23'
            }
        ]
}); });

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

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

Upvotes: 1

Lu&#237;s Cruz
Lu&#237;s Cruz

Reputation: 14970

You can accomplish that by doing something like:

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

For complete code and functionality see the following jsfiddle

Upvotes: 7

Related Questions