Ereignis Hovertext in Vollkalender hinzufügen

Question

Ich versuche, einen Hover-Text auf Ereignisse in einer Monatskalenderseite des vollständigen Kalenders einzuschließen.

Ich habe und Array-Objekt deklarieren die Ereignisse, die auf der Seite wie in einem PHP-Skript geladen werden müssen. Es sieht aus wie folgt:

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

});

Ich versuche, die Funktion eventMouseover verwenden, um einen Hover-Text mit jedem Ereignis aufzunehmen. Der Prototyp dieser Funktion ist wie folgt: function (event, jsEvent, view) {} where event ist das Ereignisobjekt, jsEvent ist das native JavaScript-Ereignis mit Low-Level-Informationen wie Mauskoordinaten. und die Ansicht enthält das Ansichtsobjekt von Vollkalender. Ich kann die Argumente dieser Funktion nicht korrekt aufrufen. Meine Infos kommen von hier: http://arshaw.com/fullcalendar/docs/mouse/eventMouseover/ und ich bin total cool mit anderen Möglichkeiten, einen Hovertext zu jedem Event zu erstellen. Vielen Dank.

Answer 1

Sie sind auf dem richtigen Weg. Ich habe etwas Ähnliches getan, um die Endzeit des Ereignisses am Ende des Ereignisses in der Agenda anzuzeigen.

Optionen auf dem Kalender:

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 für das Schweben über:

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

Hoffentlich helfen Sie!

Answer 2

Wenn Sie Bootstrap verwenden, ist diese sehr elegante Lösung:

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

(ich es von dieser Antwort bekam: https://stackoverflow.com/a/27922934/2941313)