I made a custom view js for fullcalendar. in custom view I have js and html code like
custom-js
'<td class="'+ freeDay +'"><div class="med-day-semestre" ">'
+'<div class="med-day-semestre-dayNumber">'
+ '<a class="fc-daygrid-day-number">'+ nameDay + currentDay +'</a>'
+'</div>'
+'<div class="med-day-semestre-eventBlock">'
+ *'<a href=" ' + seg.def.url + '" class="'+ seg.ui.classNames +
' fc-timeline-event fc-h-event fc-event fc-event-start fc-event-end event-teal-light-disabled event-block-display" ' +
'data-placement="bottom" data-html="true" ' +
'data-toggle="popover" data-trigger="hover" title="' + seg.def.title + '<br/><small>'+ seg.def.extendedProps.subtitle +'</small>"' +
'data-content="' + seg.def.extendedProps.description + '">' + seg.def.title +
'</a>'*
+'</div>'
+'</div></td>';
how can I change with data-toggle="popover" to use eventDidMount insteed of <a>
var calendarEl = document.getElementById('calendar');
var displayMedexactCalendar = new FullCalendar.Calendar(calendarEl, {
// code ....
eventDidMount: function(info) {
if(typeof(info.event.extendedProps.description) != "undefined" && info.event.extendedProps.description != "") {
$(info.el).popover({
title:info.event.title+"<small class='d-block'>"+info.event.extendedProps.subtitle+"</small>",
content:info.event.extendedProps.description,
html:true,
placement:'top',
container: "body",
delay: { "show": 500, "hide": 100 },
trigger:'hover',
template:'<div class="popover fc-med-popover '+info.event.classNames[0]+'" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
});
}
},
// code...