'Adding event hovertext in fullcalendar

I'm trying to include a hover text on events in a month calendar page of full calendar.

I have and array object declaring the events that need to be on the page as loaded in by a php script. It looks as followed:

$('#calendar').fullCalendar({
events: [
    {
        title  : 'event1',
        start  : '2010-01-01'
    },
    {
        title  : 'event2',
        start  : '2010-01-05',
        end    : '2010-01-07'
    }
]

});

I am trying to use the eventMouseover function to include a hover text with each event. This function's prototype is as followed: function( event, jsEvent, view ) { } Where event is the event object, jsEvent is the native JavaScript event with low-level information such as mouse coordinates. and the view holds the view object of fullcalendar. I am not able to correctly call the arguments of this function. My info is coming from here: http://arshaw.com/fullcalendar/docs/mouse/eventMouseover/ and I'm totally cool with other ways of achieving a hovertext on each event. Thank you.

Solution 1:^[1]

You're on the right track. I did something similar to show the event end time at the bottom of the event in agenda view.

Options on the calendar:

eventMouseover: function(event, jsEvent, view) {
    $('.fc-event-inner', this).append('<div id=\"'+event.id+'\" class=\"hover-end\">'+$.fullCalendar.formatDate(event.end, 'h:mmt')+'</div>');
}

eventMouseout: function(event, jsEvent, view) {
    $('#'+event.id).remove();
}

CSS for the hover over:

.hover-end{padding:0;margin:0;font-size:75%;text-align:center;position:absolute;bottom:0;width:100%;opacity:.8}

Hopefully this helps you!

Solution 2:^[2]

Without bootstrap, even simpler to add just browser tooltip with

eventRender : function(event, element) {
   element[0].title = event.title;
}

Solution 3:^[3]

If you are using bootstrap, this is very elegant solution:

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

(I got it from this answer: https://stackoverflow.com/a/27922934/2941313)

Solution 4:^[4]

For me this is what I did as I needed to mod other great answers.

HTML:

(eventRender)="addHoverTitle($event)"

Component:

addHoverTitle(args: any): void {
   args.el.title = args.event.title;
}

Solution 5:^[5]

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

WORK WITH BOOTSTRAP

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

Solution 6:^[6]

If you are using Angular

Html :

<full-calendar 
 ...
 (eventLeave)="eventLeave($event)">
</full-calendar>

Typescript:

eventRender($event) {
  $event.el.title = $event.event.title;
}

Solution 7:^[7]

In the Calendar options I used this for my angular project:

eventMouseEnter: function (calEvent) {
    calEvent.el.title = calEvent.event.title;
},

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Lurkars
Solution 3	Lech Osi?ski
Solution 4	Tom Stickel
Solution 5
Solution 6	AbolfazlR
Solution 7	Omzig

'Adding event hovertext in fullcalendar

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]