In my project, I am incorporating fullcalendar.js. The goal is to display a div when hovering over any event. Inside this div, there are three action buttons: edit, view, and delete. Let me share the relevant code snippets with you.
HTML
<div id="calendar"/>
JavaScript/jQuery
<script>
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
eventMouseover: function(event, jsEvent, view) {
$template="<div class='hover-div clearfix' id='event_"+event.id+"'>"+
"<div class='display-inline-block'>"+
"<i class='fas fa-pencil-alt'></i>"+
"<a class='edit-calender common-font-properties'>Edit</a>"+
"</div>"+
"<div class='display-inline-block'>"+
"<i class='fas fa-eye'></i>"+
"<a class='edit-calender common-font-properties'>View</a>"+
"</div>"+
"<div class='display-inline-block'>"+
" <i class='fas fa-trash'></i>"+
" <a class='edit-calender common-font-properties'>Delete</a>"+
" </div>"+
"</div>";
//$('.fc-content .fc-title', this).wrapAll("<div class='wrapall'><div>");
// $('.fc-content .wrapall', this).prepend($template);
$('.fc-content', this).prepend($template);
},
eventMouseout: function(event, jsEvent, view) {
//$('#event_'+event.id).remove();
},
navLinks: true,
editable: true,
eventLimit: true,
events: [
{
id: 7,
title: 'Lunch',
start: '2018-08-12T12:00:00'
},
{
id: 8,
title: 'Meeting',
start: '2018-08-13T14:30:00'
},
{
id: 9,
title: 'Happy Hour',
start: '2018-08-14T17:30:00'
},
{
id: 10,
title: 'Dinner',
start: '2018-08-15T20:00:00'
},
{
id: 11,
title: 'Birthday Party',
start: '2018-08-16T07:00:00'
},
{
id: 12,
title: 'Click for Google',
url: 'http://google.com/',
start: '2018-03-28'
}
]
});
</script>
The issue at hand is that the hover div I've created seems to be positioned behind the main container, making it partially or completely hidden on smaller screens. Despite attempting various solutions like adjusting the z-index, the visibility of my div remains a challenge. Any suggestions or assistance would be greatly appreciated.