2012-03-28 42 views
10

Estoy tratando de incluir un texto de desplazamiento sobre eventos en una página de calendario mensual del calendario completo.Agregar evento hovertext en fullcalendar

Tengo un objeto array que declara los eventos que deben estar en la página cargados por un script php. Parece lo siguiente:

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

});

Estoy tratando de usar la función eventMouseover para incluir un texto emergente con cada evento. El prototipo de esta función es el siguiente: function (event, jsEvent, view) {} Donde event es el objeto de evento, jsEvent es el evento de JavaScript nativo con información de bajo nivel, como las coordenadas del mouse. y la vista contiene la vista objeto de fullcalendar. No puedo llamar correctamente los argumentos de esta función. Mi información proviene de aquí: http://arshaw.com/fullcalendar/docs/mouse/eventMouseover/ y estoy totalmente satisfecho con otras formas de lograr un texto contextual en cada evento. Gracias.

Respuesta

19

Estás en el camino correcto. Hice algo similar para mostrar la hora de finalización del evento en la parte inferior del evento en la vista de la agenda.

Opciones en el 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 para el vuelo estacionario sobre: ​​

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

Esperemos que esto le ayuda!

+0

Gracias @ Michael lrigoyen, es muy completa ayudar a mí ... –

+0

He pasado dos fuentes de eventos. ¿Es posible mostrar el vuelo estacionario solo para una fuente de evento? –

1

Si está utilizando de arranque, esta es una solución muy elegante:

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

(Me lo dio esta respuesta: https://stackoverflow.com/a/27922934/2941313)

+0

funcionó para mí, ¡gracias! :) –

Cuestiones relacionadas