How do I display start and end time in fullcalendar on mouseover?

advertisements

I am working on full calendar for some days. I am facing a problem and I search in lot of place, nothing is working.
I want to show the start and end time on mouseover. I have customised the calendar in a day format. Where I have 30 min. slots. There are some events. I have the code where the event tile is shown on mouse over not the start and time. Below the working code of mouseover section.

eventMouseover: function(event, jsEvent, view) {
 if (view.name !== 'agendaDay') {
    $(jsEvent.target).attr('title', event.title);
   }
},

The event title is display here. Need to show the start and end time. Please help me. And also if possible to add style in the mouseover section. How to do these things, please help.

Thanks in advance for help.


If I understand you correctly, you can try this solution :

                    eventMouseover: function(calEvent, jsEvent) {  

                    var durationTime = moment(calEvent.start).format('HH') + ":" + moment(calEvent.start).format('mm') + " - " + moment(calEvent.end).format('HH') + ":" + moment(calEvent.end).format('mm')
                    var tooltip = '<div class="tooltipevent" style="width:100px; height:20px; position:absolute;z-index:1000;">' + durationTime + '</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();
                }

this solution is ref by this > Tooltip for fullcalendar in year view