2012-03-21 42 views
11

Quiero agregar información sobre herramientas para el calendario completo en la vista de año. Intenté con la siguiente, pero agregó información sobre herramientas a la vista de mes. Intenté con google pero no encontré nada relacionado con esto. ¿Hay alguna otra manera de agregar una información sobre herramientas en la vista de año?Información sobre herramientas para fullcalendar en la vista de año

eventMouseover: function(calEvent,jsEvent) { 
      xOffset = 10; 
      yOffset = 30; 
      $("body").append(calEvent.tooltip); 
      $("#tooltip") 
       .css("top",(jsEvent.clientY - xOffset) + "px") 
       .css("left",(jsEvent.clientX + yOffset) + "px") 
       .fadeIn("fast"); 
    }, 
    eventMouseout: function(calEvent,jsEvent) { 
     $("#tooltip").remove(); 
    } 
+1

¿Cómo le va miras años? Las vistas disponibles están definidas en la documentación. http://arshaw.com/fullcalendar/docs/views/Available_Views/ – MetalFrog

Respuesta

47
eventMouseover: function(calEvent, jsEvent) { 
    var tooltip = '<div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">' + calEvent.title + '</div>'; 
    var $tooltip = $(tooltip).appendTo('body'); 

    $(this).mouseover(function(e) { 
     $(this).css('z-index', 10000); 
     $tooltip.fadeIn('500'); 
     $tooltip.fadeTo('10', 1.9); 
    }).mousemove(function(e) { 
     $tooltip.css('top', e.pageY + 10); 
     $tooltip.css('left', e.pageX + 20); 
    }); 
}, 

eventMouseout: function(calEvent, jsEvent) { 
    $(this).css('z-index', 8); 
    $('.tooltipevent').remove(); 
}, 
+3

por favor cambie "var $ tootlip" a "var $ tooltip". Y gracias por el ejemplo. Trabaja como un encanto – SERG

+0

¿Contexto por favor? ¿Esto está en '$ (" # calendar "). FullCalendar ({});' o parte de ''renderEvent'' –

6

desde la versión 1.5, puede utilizar qtip (también uso borracho pero debería funcionar con información sobre herramientas) para mostrar un consejo sobre un evento:

$('#calendar').fullCalendar({ 
    events: [ 
     { 
      title: 'My Event', 
      start: '2010-01-01', 
      description: 'This is a cool event' 
     } 
     // more events here 
    ], 
    eventRender: function(event, element) { 
     element.qtip({ 
      content: event.description 
     }); 
    } 
}); 

fuente doc: http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/

Espero que esto ayude

+1

esto también agregó la información sobre herramientas en la vista de mes, no pasó nada en la vista de año. :( – karki

23

Puede usar el atributo de título html sin tooltip lib:

$('#calendar').fullCalendar({ 
    events: [ 
     { 
      title: 'My Event', 
      start: '2014-01-01', 
      tooltip: 'This is a cool event' 
     } 
     // more events here 
    ], 
    eventRender: function(event, element) { 
     element.attr('title', event.tooltip); 
    } 
}); 
+3

Como se debe usar jQuery 1.6 prop():' element.prop ("title", event.title); ' – dennisV

0

Aquí otra implementación

eventMouseover: function(calEvent, jsEvent) { var tooltip = '<div class="tooltipevent" style="width:130px;height:100px;background:#aed0ea;position:absolute;z-index:10001;"> Title: ' + calEvent.title + '</div>'; var $tool = $(tooltip).appendTo('body'); 
$(this).mouseover(function(e) { 
    $(this).css('z-index', 10000); 
      $tool.fadeIn('500'); 
      $tool.fadeTo('10', 1.9); 
}).mousemove(function(e) { 
    $tool.css('top', e.pageY + 10); 
    $tool.css('left', e.pageX + 20); 
}); 
}, 
eventMouseout: function(calEvent, jsEvent) { 
$(this).css('z-index', 8); 
$('.tooltipevent').remove(); 
}, 

Cuestiones relacionadas