fullcalendar with clickable popup on hover

Question

I need a pop up on hover full calendar like this one.

Have tried full calendar with qtip but could not get clickable popup its disappers when mouse is out from the spot.

Here's a similar example but it need to create a clickable popup like that of above example

$(document).ready(function() {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var events_array = [
        {
            title: 'Test1',
            start: new Date(2012, 8, 20),
            tip: 'Personal tip 1'
        },
        {
            title: 'Test2',
            start: new Date(2012, 8, 21),
            tip: 'Personal tip 2'
        }
    ];

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        selectable: true,
        events: events_array,
        eventRender: function(event, element) {
            element.attr('title', event.tip);
        }
    });
});

score 36 · Answer 1 · answered Jan 13 '15 at 13:07

36

Use Bootstrap tooltip plugin http://getbootstrap.com/javascript/#tooltips . And then inside eventRender callback write following:

 eventRender: function(event, element) {
      $(element).tooltip({title: event.title});             
  }

This will work

enter image description here

answered Jan 13 '15 at 13:07

prashantsahni

2,128
19
20

Works great but I'm having some issue with the 'agendaWeek' view, tooltip stick into the column – Vivien Jul 21 '16 at 13:05
1

This answer does not address the important part of the question, "could not get clickable popup its disappers when mouse is out " – Arvind K. Jul 17 '17 at 06:25

score 12 · Answer 2 · answered Mar 17 '14 at 19:45

check this example. http://jsfiddle.net/craga89/N78hs/

eventClick: function(data, event, view) {
            var content = '<h3>'+data.title+'</h3>' + 
                '<p><b>Start:</b> '+data.start+'<br />' + 
                (data.end && '<p><b>End:</b> '+data.end+'</p>' || '');

            tooltip.set({
                'content.text': content
            })
            .reposition(event).show(event);
        }

it works on click, not in hover, but you can adapt it to work in hover as well

score 11 · Answer 3 · answered Jul 08 '15 at 05:36

eventMouseover: function(calEvent, jsEvent) {
    var tooltip = '<div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">' + calEvent.title + '</div>';
    $("body").append(tooltip);
    $(this).mouseover(function(e) {
        $(this).css('z-index', 10000);
        $('.tooltipevent').fadeIn('500');
        $('.tooltipevent').fadeTo('10', 1.9);
    }).mousemove(function(e) {
        $('.tooltipevent').css('top', e.pageY + 10);
        $('.tooltipevent').css('left', e.pageX + 20);
    });
},

eventMouseout: function(calEvent, jsEvent) {
     $(this).css('z-index', 8);
     $('.tooltipevent').remove();
},

score 4 · Answer 4 · answered Sep 05 '19 at 15:50

4

In version 4 of FullCalendar, there is only one argument: eventRender: function (info)

so the snippet is:

eventRender: function (info) {
  $(info.el).tooltip({ title: info.event.title });     
}

answered Sep 05 '19 at 15:50

Antonio Santise

302
3
5

Men... u r a genius! :) – Nowdeen Aug 26 '22 at 17:03

score 3 · Accepted Answer · answered Mar 18 '14 at 04:50

heres my code

    $(document).ready(function() {
    // Setup FullCalendar
// Setup FullCalendar
(function() {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var tooltip = $('<div/>').qtip({
        id: 'fullcalendar',
        prerender: true,
        content: {
            text: ' ',
            title: {
                button: true
            }
        },
        position: {
            my: 'bottom center',
            at: 'top center',
            target: 'mouse',
            viewport: $('#fullcalendar'),
            adjust: {
                mouse: false,
                scroll: false
            }
        },
        show: false,
        hide: false,
        style: 'qtip-light'
    }).qtip('api');

    $('#fullcalendar').fullCalendar({
        editable: true,
        height: 600,
        header: {
            left: 'title',
            center: '',
            right: 'today prev,next'
        },
        eventMouseover : function(data, event, view) {
            var content = '<h3>'+data.title+'</h3>' + 
                '<p><b>Start:</b> '+data.start+'<br />' + 
                (data.end && '<p><b>End:</b> '+data.end+'</p>' || '');

            tooltip.set({
                'content.text': content
            })
            .reposition(event).show(event);
        },
        dayClick: function() { tooltip.hide() },
        eventResizeStart: function() { tooltip.hide() },
        eventDragStart: function() { tooltip.hide() },
        viewDisplay: function() { tooltip.hide() },
        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d-5),
                end: new Date(y, m, d-2)
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d+4, 16, 0),
                allDay: false
            },
            {
                title: 'Meeting',
                start: new Date(y, m, d, 10, 30),
                allDay: false
            },
            {
                title: 'Birthday Party',
                start: new Date(y, m, d+1, 19, 0),
                end: new Date(y, m, d+1, 22, 30),
                allDay: false
            }
        ]
    });
}());
    });

</script>

score 3 · Answer 6 · edited Jul 19 '18 at 10:00

I am doing this within Shopify with jQuery already active.

I downloaded the bootstrap Tooltip plugin but actually preferred using the popover plugin.

Having linked to the necessary bootstrap CSS and JS files I then had the following below. If you rather use tooltip you what I had worked, but I commented it out in preference of popover.

$(document).ready(function() {
 $('#calendar').fullCalendar({
                defaultView: 'month',
                //eventBackgroundColor: 'red',
                //weekends: false,
                eventTextColor: '#FFFFFF',
                hiddenDays: [ 0 ],

        header: {
            left: 'prev,next',
            center: 'title',
            right: 'month,basicWeek,'
        },

//              eventRender: function(event, element) {
//                  $(element).tooltip({title: event.description});             
//              },

        eventRender: function(event, element) {
          $(element).popover({title: event.title, content: event.description, trigger: 'hover', placement: 'auto right', delay: {"hide": 300 }});             
        },

        googleCalendarApiKey: 'XXXXXX',      

        eventSources: [
         {//BEGINNERS ACTING FUN
            googleCalendarId: 'XXXXX',
            color: '#990000',   // an option!
        },
         {//INTERMEDIATES SCENE WORK
            googleCalendarId: 'XXXX',
            color: 'purple',   // an option!  
        },
           {//INTERMEDIATES SCENE WORK
            googleCalendarId: 'XXX',
            color: 'blue',   // an option!  
        },


        {// VOICE & COMMUNICATION SKILLS
            googleCalendarId: 'XXXX',
            color: 'green',   // an option!
        }

        ]

    });

});

score 2 · Answer 7 · answered Jun 17 '20 at 09:07

Updated answer based on @Divyank Sabhaya's solution to work on v4

eventMouseEnter: function(calEvent) {
var tooltip = '<div class="tooltipevent" style="width:auto;height:20px;vertical-align:middle;background:'+calEvent.el.style.backgroundColor+';position:absolute;z-index:10001;">' + calEvent.event._def.extendedProps.description + '</div>';
$("body").append(tooltip);
$(this.el).mouseover(function(e) {
    $(this.el).css('z-index', 10000);
    $('.tooltipevent').fadeIn('500');
    $('.tooltipevent').fadeTo('10', 1.9);
}).mousemove(function(e) {
    $('.tooltipevent').css('top', e.pageY + 10);
    $('.tooltipevent').css('left', e.pageX + 20);
});},

eventMouseLeave: function(calEvent, jsEvent) {
 $(this.el).css('z-index', 8);
 $('.tooltipevent').remove();},

best

score -1 · Answer 8 · answered Mar 18 '14 at 05:38

    $(document).ready(function() {
    // Setup FullCalendar
// Setup FullCalendar
(function() {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var tooltip = $('<div/>').qtip({
        id: 'fullcalendar',
        prerender: true,
        content: {
            text: ' ',
            title: {
                button: true
            }
        },
        position: {
            my: 'bottom center',
            at: 'top center',
            target: 'mouse',
            viewport: $('#fullcalendar'),
            adjust: {
                mouse: false,
                scroll: false
            }
        },
        show: false,
        hide: false,
        style: 'qtip-light'
    }).qtip('api');

    $('#fullcalendar').fullCalendar({
        editable: true,
        height: 600,
        header: {
            left: 'title',
            center: '',
            right: 'today prev,next'
        },
        eventMouseover : function(data, event, view) {
            var content = '<h3>'+data.title+'</h3>' + 
                '<p><b>Start:</b> '+data.start+'<br />' + 
                (data.end && '<p><b>End:</b> '+data.end+'</p>' || '');

            tooltip.set({
                'content.text': content
            })
            .reposition(event).show(event);
        },
        dayClick: function() { tooltip.hide() },
        eventResizeStart: function() { tooltip.hide() },
        eventDragStart: function() { tooltip.hide() },
        viewDisplay: function() { tooltip.hide() },
        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d-5),
                end: new Date(y, m, d-2)
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d+4, 16, 0),
                allDay: false
            },
            {
                title: 'Meeting',
                start: new Date(y, m, d, 10, 30),
                allDay: false
            },
            {
                title: 'Birthday Party',
                start: new Date(y, m, d+1, 19, 0),
                end: new Date(y, m, d+1, 22, 30),
                allDay: false
            }
        ]
    });
}());
    });

</script>

fullcalendar with clickable popup on hover

8 Answers8

Linked