2012-03-28 17 views
10

Sto tentando di includere un testo al passaggio del mouse sugli eventi in una pagina del calendario mensile del calendario completo.Aggiunta di hovertext evento in fullcalendar

Ho e oggetto array che dichiara gli eventi che devono essere presenti nella pagina come caricati da uno script php. Sembra come segue:

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

});

Sto cercando di utilizzare la funzione eventMouseover per includere un testo hover con ogni evento. Il prototipo di questa funzione è il seguente: function (event, jsEvent, view) {} Dove event è l'oggetto evento, jsEvent è l'evento JavaScript nativo con informazioni di basso livello come le coordinate del mouse. e la vista mantiene l'oggetto vista di fullcalendar. Non sono in grado di chiamare correttamente gli argomenti di questa funzione. Le mie informazioni provengono da qui: http://arshaw.com/fullcalendar/docs/mouse/eventMouseover/ e sono assolutamente d'accordo con altri modi per ottenere un hovertext su ogni evento. Grazie.

risposta

19

Sei sulla strada giusta. Ho fatto qualcosa di simile per mostrare l'ora di fine dell'evento nella parte inferiore dell'evento nella vista agenda.

opzioni sul calendario:

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 per il passaggio del mouse sopra:

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

Speriamo che questo ti aiuta!

+0

Grazie @ Michael lrigoyen, è molto aiuto pieno per me ... –

+0

Ho passato due fonti di eventi. È possibile mostrare il passaggio del mouse su una sola fonte di eventi? –

1

Se si utilizza bootstrap, questo è molto elegante soluzione:

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

(l'ho presa da questa risposta: https://stackoverflow.com/a/27922934/2941313)

+0

ha funzionato per me - grazie! :) –

Problemi correlati