I am working on full calendar for some days. I am facing a problem and I search in lot of place, nothing is working.
I want to show the start and end time on mouseover. I have customised the calendar in a day format. Where I have 30 min. slots. There are some events. I have the code where the event tile is shown on mouse over not the start and time. Below the working code of mouseover section.
eventMouseover: function(event, jsEvent, view) {
if (view.name !== 'agendaDay') {
$(jsEvent.target).attr('title', event.title);
}
},
The event title is display here. Need to show the start and end time. Please help me. And also if possible to add style in the mouseover section. How to do these things, please help.
Thanks in advance for help.
I am working on full calendar for some days. I am facing a problem and I search in lot of place, nothing is working.
I want to show the start and end time on mouseover. I have customised the calendar in a day format. Where I have 30 min. slots. There are some events. I have the code where the event tile is shown on mouse over not the start and time. Below the working code of mouseover section.
eventMouseover: function(event, jsEvent, view) {
if (view.name !== 'agendaDay') {
$(jsEvent.target).attr('title', event.title);
}
},
The event title is display here. Need to show the start and end time. Please help me. And also if possible to add style in the mouseover section. How to do these things, please help.
Thanks in advance for help.
If I understand you correctly, you can try this solution :
eventMouseover: function(calEvent, jsEvent) {
var durationTime = moment(calEvent.start).format('HH') + ":" + moment(calEvent.start).format('mm') + " - " + moment(calEvent.end).format('HH') + ":" + moment(calEvent.end).format('mm')
var tooltip = '<div class="tooltipevent" style="width:100px; height:20px; position:absolute;z-index:1000;">' + durationTime + '</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();
}
this solution is ref by this > Tooltip for fullcalendar in year view
If you use a tooltip library like qTip2 it is easy to add and style a tooltip. Editing the example from eventRender as a demo
$('#calendar').fullCalendar({
defaultView: 'basicWeek',
events: [{
title: 'My Event',
start: moment().format('YYYY-MM-DD') + ' 16:30',
end: moment().format('YYYY-MM-DD') + ' 17:00',
description: 'This is an event from 4:30pm to 5:00pm'
}
// more events here
],
eventRender: function(event, element) {
element.qtip({
content: '<b>' + event.start.format('hh:mma') + ' - ' + event.end.format('hh:mma') + '</b>' +
'<br>' +
'<u>' + event.description + '</u>'
});
}
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.13.0/moment.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/qtip2/3.0.3/jquery.qtip.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/fullcalendar/2.7.2/fullcalendar.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/fullcalendar/2.7.2/fullcalendar.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare./ajax/libs/qtip2/3.0.3/jquery.qtip.css" rel="stylesheet"/>
<div id='calendar'></div>