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.

Answer 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!