CODEWITHSUNDEEP
javascriptjqueryfullcalendar
billybobjones
billybobjones

Reputation: 513

How to get the event information and have it display in a tooltip in FullCalendar.js?

To further explain,

I'm using the FullCalendar plugin (http://fullcalendar.io/). And whenever I hover over an event, I want the event information(title, date, time etc.) to be displayed in a tooltip.

I kinda got it working, but only the event title is showing.

How can I make the Date and Time to show as well?

Thanks in advance!

Here's what I got so far:

$(document).ready(function() {

    $('#calendar').fullCalendar({
        // put your options and callbacks here

        height: 'auto',
        timeFormat: 'h:mm',
        /*eventClick: function(calEvent, jsEvent, view){
            window.location = "http://www."
        }*/

        events: [
            {
                title : 'Pizza Cooking Class',
                start : '2015-11-12T09:00', // Year, Month, Day + Time
                color : '#00adef', // Label color
                textColor : '#FFF', // Text color
                category : '1',
                url : 'cookingclass.php'
            }
        ],
        eventRender: function eventRender(event, element, view ) {
        return ['all', event.category].indexOf($('#category-select').val()) >= 0
        },  

        eventMouseover: function(calEvent, jsEvent, view) {
            var tooltip = '<div class="tooltipevent" style="width:200px;height:50px;background:#fff;position:absolute;z-index:10001; padding:20px; border:1px solid rgba(0,0,0,0.1);">' + 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, view) {
            $(this).css('z-index', 8);
            $('.tooltipevent').remove();
        }

    });

})

Upvotes: 0

Views: 623

Answers (2)

paul
paul

Reputation: 13516

I used the code given in the answer from @guradio but found that the tooltip was only displayed when over the text of event.

Popup only activated over event text

I modified the code to the following which seems to work well and the tooltip is triggered when the mouse enters any part of the event.

eventMouseover : function(calEvent, jsEvent) {
    $('.tooltipevent').remove();
    var tt = $(getTooltip(calEvent));
    $("body").append(tt);
    $(tt).hide();
    $(tt).fadeTo('1000', 0.9);
    $(tt).position({
        my: "left top",
        at: "left bottom",
        of: $(this),
        collision: "fit"
    });
},

eventMouseout : function(calEvent, jsEvent) {
    $('.tooltipevent').remove();
}

Upvotes: 0

guradio
guradio

Reputation: 15555

eventMouseover: function(calEvent, jsEvent, view) {
    var jsDate = new Date(jsEvent.timeStamp * 1000);
    console.log(jsDate.toDateString())
    var tooltip = '<div class="tooltipevent" style="width:200px;height:50px;background:#fff;position:absolute;z-index:10001; padding:20px; border:1px solid rgba(0,0,0,0.1);">' + calEvent.title + '<br>' + jsDate.toDateString() + '</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);
    });
}

Try this one.

Upvotes: 1

Related Questions