CODEWITHSUNDEEP
javascriptjqueryfullcalendar
usumoio
usumoio

Reputation: 3568

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.

Upvotes: 19

Views: 50422

Answers (9)

tranchau
tranchau

Reputation: 131

            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

Upvotes: 1

Abdul Jaleel
Abdul Jaleel

Reputation: 31

If you are using fullcalendar version5:

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

Upvotes: 3

Omzig
Omzig

Reputation: 911

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

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

Upvotes: 0

Abolfazl Roshanzamir
Abolfazl Roshanzamir

Reputation: 14792

If you are using Angular

Html :

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

Typescript:

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

Upvotes: 0

Yamiel Serrano
Yamiel Serrano

Reputation: 124

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

Upvotes: 1

Tom Stickel
Tom Stickel

Reputation: 20401

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

  

Upvotes: 1

Lurkars
Lurkars

Reputation: 101

Without bootstrap, even simpler to add just browser tooltip with

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

Upvotes: 10

Lech Osiński
Lech Osiński

Reputation: 522

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)

Upvotes: 4

Michael Irigoyen
Michael Irigoyen

Reputation: 22947

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!

Upvotes: 25

Related Questions