Adding event hovertext in fullcalendar

Question

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.

Michael Irigoyen · Accepted Answer · 2014-07-08T15:16:05.780

25

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!

edited Jul 08 '14 at 15:16

answered Sep 17 '12 at 20:21

Michael Irigoyen

22,513
17
89
131

I have passed two event sources. Is it possible to show hover for only one event source? – CJ Ramki Dec 07 '13 at 07:56

score 8 · Answer 2 · answered Mar 23 '18 at 12:37

8

Without bootstrap, even simpler to add just browser tooltip with

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

answered Mar 23 '18 at 12:37

Lurkars

81
1
3

Worked for me! Actually should be the answer. – digofreitas Jul 20 '18 at 17:35
1

v5 now requires eventDidMount: function(info) { info.el.title = info.event.title; }, – Rich Oct 23 '21 at 16:46

score 4 · Answer 3 · answered Jul 17 '17 at 09:18

4

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)

answered Jul 17 '17 at 09:18

Lech Osiński

512
7
14

will this work on multiple tooltips? i tried ````tooltip({title: event.title,description: event.description});```` but it didn't worked. – pjustindaryll Sep 25 '19 at 00:54
I'm not sure what do you need. I don't think description is a part of bootstrap tooltip, right? If you could be more precise, then maybe I could assist you further. – Lech Osiński Sep 25 '19 at 17:05

score 2 · Answer 4 · answered Jul 02 '22 at 09:07

2

If you are using fullcalendar version5:

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

answered Jul 02 '22 at 09:07

Abdul Jaleel

21
4

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 03 '22 at 09:25

score 1 · Answer 5 · answered Apr 16 '20 at 20:31

1

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;
}

answered Apr 16 '20 at 20:31

Tom Stickel

19,633
6
111
113

Yamiel Serrano · Answer 6 · 2020-06-05T19:01:31.833

1

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 });
}

edited Jun 05 '20 at 19:01

answered Jun 04 '20 at 18:55

Yamiel Serrano

104
5

Most people want an answer not involving addition libraries or frameworks. – Angshu31 Jun 04 '20 at 20:46

score 0 · Answer 7 · answered Sep 16 '20 at 11:35

0

If you are using Angular

Html :

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

Typescript:

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

answered Sep 16 '20 at 11:35

Abolfazl Roshanzamir

12,730
5
63
79

score 0 · Answer 8 · answered Apr 19 '22 at 21:06

0

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

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

answered Apr 19 '22 at 21:06

Omzig

861
1
12
20

score 0 · Answer 9 · answered Apr 27 '23 at 07:38

            eventDidMount: function(info) {
                if(info.view.type!='timeGridDay'){
                    $(info.el).tooltip({ title: info.event.title });    
                }
            }

for v4 we can use "eventRender" https://fullcalendar.io/docs/v4/eventRender

for v5,v6 we can use "eventDidMount" https://fullcalendar.io/docs/event-object

Adding event hovertext in fullcalendar

9 Answers9