fullcalendar with clickable popup on hover
84,207
Solution 1
heres my code
$(document).ready(function() {
// Setup FullCalendar
// Setup FullCalendar
(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var tooltip = $('<div/>').qtip({
id: 'fullcalendar',
prerender: true,
content: {
text: ' ',
title: {
button: true
}
},
position: {
my: 'bottom center',
at: 'top center',
target: 'mouse',
viewport: $('#fullcalendar'),
adjust: {
mouse: false,
scroll: false
}
},
show: false,
hide: false,
style: 'qtip-light'
}).qtip('api');
$('#fullcalendar').fullCalendar({
editable: true,
height: 600,
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
eventMouseover : function(data, event, view) {
var content = '<h3>'+data.title+'</h3>' +
'<p><b>Start:</b> '+data.start+'<br />' +
(data.end && '<p><b>End:</b> '+data.end+'</p>' || '');
tooltip.set({
'content.text': content
})
.reposition(event).show(event);
},
dayClick: function() { tooltip.hide() },
eventResizeStart: function() { tooltip.hide() },
eventDragStart: function() { tooltip.hide() },
viewDisplay: function() { tooltip.hide() },
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
}
]
});
}());
});
</script>
Solution 2
Use Bootstrap tooltip plugin http://getbootstrap.com/javascript/#tooltips . And then inside eventRender callback write following:
eventRender: function(event, element) {
$(element).tooltip({title: event.title});
}
This will work
Solution 3
check this example. http://jsfiddle.net/craga89/N78hs/
eventClick: function(data, event, view) {
var content = '<h3>'+data.title+'</h3>' +
'<p><b>Start:</b> '+data.start+'<br />' +
(data.end && '<p><b>End:</b> '+data.end+'</p>' || '');
tooltip.set({
'content.text': content
})
.reposition(event).show(event);
}
it works on click, not in hover, but you can adapt it to work in hover as well
Solution 4
eventMouseover: function(calEvent, jsEvent) {
var tooltip = '<div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">' + calEvent.title + '</div>';
$("body").append(tooltip);
$(this).mouseover(function(e) {
$(this).css('z-index', 10000);
$('.tooltipevent').fadeIn('500');
$('.tooltipevent').fadeTo('10', 1.9);
}).mousemove(function(e) {
$('.tooltipevent').css('top', e.pageY + 10);
$('.tooltipevent').css('left', e.pageX + 20);
});
},
eventMouseout: function(calEvent, jsEvent) {
$(this).css('z-index', 8);
$('.tooltipevent').remove();
},
Solution 5
In version 4 of FullCalendar, there is only one argument: eventRender: function (info)
so the snippet is:
eventRender: function (info) {
$(info.el).tooltip({ title: info.event.title });
}
Related videos on Youtube
Comments
-
sunilkjt almost 4 years
I need a pop up on hover full calendar like this one.
Have tried full calendar with qtip but could not get clickable popup its disappers when mouse is out from the spot.
Here's a similar example but it need to create a clickable popup like that of above example
$(document).ready(function() { var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); var events_array = [ { title: 'Test1', start: new Date(2012, 8, 20), tip: 'Personal tip 1' }, { title: 'Test2', start: new Date(2012, 8, 21), tip: 'Personal tip 2' } ]; $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, selectable: true, events: events_array, eventRender: function(event, element) { element.attr('title', event.tip); } }); });
-
Vivien almost 8 yearsWorks great but I'm having some issue with the 'agendaWeek' view, tooltip stick into the column
-
Arvind K. almost 7 yearsThis answer does not address the important part of the question, "could not get clickable popup its disappers when mouse is out "
-
Sajin Shereef about 5 yearsYou saved my day, dude
-
MintWelsh almost 3 yearsjsfiddle now broken