2012-03-28 11 views
10

Próbuję umieścić tekst na hover w wydarzeniach na stronie kalendarza miesięcznego pełnego kalendarza.Dodawanie hvertekstu wydarzenia w formacie fullcalendar

Posiadam i obiekt tablicy deklarujący zdarzenia, które muszą znajdować się na stronie, jak załadowany przez skrypt php. Wygląda następująco:

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

});

Próbuję użyć funkcji eventMouseover, aby zawrzeć tekst z każdym zdarzeniem. Prototyp tej funkcji jest następujący: function (event, jsEvent, view) {} Gdzie zdarzenie jest obiektem zdarzenia, jsEvent jest natywnym zdarzeniem JavaScript z informacjami niskiego poziomu, takimi jak współrzędne myszy. i widok zawiera obiekt widoku fullcalendar. Nie jestem w stanie poprawnie wywołać argumentów tej funkcji. Moje informacje pochodzą stąd: http://arshaw.com/fullcalendar/docs/mouse/eventMouseover/ i jestem całkowicie spoko z innymi sposobami osiągnięcia hvertextext na każdym wydarzeniu. Dziękuję Ci.

Odpowiedz

19

Jesteś na dobrej drodze. Zrobiłem coś podobnego do pokazania czasu zakończenia wydarzenia u dołu wydarzenia w widoku planu.

Opcje na kalendarzu:

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 dla Najedź:

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

Mam nadzieję, że to pomaga!

+0

Dzięki @Michael lrigoyen, Jego bardzo pomaga w całości do mnie ... –

+0

Przekazałem dwa źródła zdarzeń. Czy można wyświetlić wskaźnik myszy tylko dla jednego źródła zdarzeń? –

1

Jeśli używasz bootstrap, jest to bardzo eleganckie rozwiązanie:

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

(mam go od tej odpowiedzi: https://stackoverflow.com/a/27922934/2941313)

+0

pracował dla mnie - dzięki! :) –

Powiązane problemy