Je souhaite ajouter une info-bulle pour le calendrier complet en vue annuelle. J'ai essayé avec celui ci-dessous mais il a ajouté une info-bulle à la vue mensuelle. J'ai essayé avec google mais je n'ai rien trouvé à ce sujet. Existe-t-il un autre moyen d'ajouter une info-bulle dans la vue annuelle?
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();
}
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();
},
Vous pouvez utiliser l'attribut title html sans aucune aide tool:
$('#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);
}
});
depuis la version 1.5, vous pouvez utiliser qtip (j'utilise aussi tipy mais cela devrait fonctionner avec tooltip) pour afficher une astuce sur un événement:
$('#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
});
}
});
source du doc: http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/
j'espère que cela t'aides
Voici une autre implémentation
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();
},