[英]In fullcalendar event tooltip is not visisble
In my laravel 5.8 / Bootstrap v4.1.2 / jquery jQuery v3.3.1 fullcalendar v4.3.1 app I want to add tooltip to events of fullcalendar and looking at this sample https://codepen.io/pen/?&editable=true&editors=001在我的 Laravel 5.8 / Bootstrap v4.1.2 / jquery v3.3.1 fullcalendar v4.3.1 应用程序中,我想将工具提示添加到 fullcalendar 的事件中并查看此示例https://codepen.io/pen/?&editable=true&editors=001
I do it as :我这样做:
eventRender: function (eventInfo) {
console.log("eventInfo" )
console.log( eventInfo )
console.log("eventInfo.el" )
console.log( eventInfo.el )
var tooltip = new Tooltip(eventInfo.el, {
title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor', //eventInfo.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
eventInfo.el.querySelector('.fc-title').innerHTML += "<i class='fa fa-external-link pull-right'" +
" onclick=\"javascript:backendEvent.editCalendarEvent(event," + eventInfo.event.id + "); return" +
" false;\">Edit</i>";
return;
I have no any errors in console and no tooltip text.我在控制台中没有任何错误,也没有工具提示文本。
and in console I see eventInfo.el as : https://imgur.com/a/S9GuW2V I suppose they are valid elements在控制台中,我看到 eventInfo.el 为: https ://imgur.com/a/S9GuW2V 我想它们是有效元素
In my resources/views/admin/event/index.blade.php I have included :在我的 resources/views/admin/event/index.blade.php 我包括:
<script src="{{ asset('js/fullcalendar/core/main.js') }}"></script>
<!-- FullCalendar Core Package v4.3.1 -->
<script src="{{ asset('js/fullcalendar/daygrid/main.js') }}"></script>
<!-- FullCalendar Day Grid Plugin v4.3.0 -->
<script src="{{ asset('js/popper.min.js') }}"></script>
<!-- Copyright (C) Federico Zivolo 2019 -->
<script src="{{ asset('js/tooltip.min.js') }}"></script>
<!-- Copyright (C) Federico Zivolo 2019 -->
In the example I see that tooltip var is created but never used . Is it ok ?
How to fix it ?
MODIFIED BLOCK :修改块:
All js functionality is in public/js/defaultBS41Backend/admin/event.js file and it is loaded after fullcalendar files : https://imgur.com/a/eMcCQKa所有 js 功能都在 public/js/defaultBS41Backend/admin/event.js 文件中,它在 fullcalendar 文件之后加载: https ://imgur.com/a/eMcCQKa
FullCsalendar is inited in js functions : FullCsalendar 在 js 函数中初始化:
backendEvent.prototype.evenstLoadWithFullCalendar = function () {
var dataArray = {
"_token": this_csrf_token,
"filter_event_name": $("#filter_event_name").val(),
"filter_start_date": $("#filter_start_date").val(),
"filter_end_date": $("#filter_end_date").val(),
"filter_type": $("#filter_type").val(),
"filter_status": $("#filter_status").val()
}
var href = this_backend_home_url + "/admin/get_events_fc_listing";
$.ajax({
type: "POST",
dataType: "json",
url: href,
data: dataArray,
success: function (response) {
if (response.error_code == 0) {
initFullCalendar(response.events);
}
},
error: function (error) {
popupErrorMessage(error.responseJSON.message)
}
});
}
function initFullCalendar(eventsList) {
if (typeof window.calendarEventsObject != "undefined") { // clear existing instance
window.calendarEventsObject.destroy();
}
var calendarEl = document.getElementById('events_calendar');
var effective_device_width = effectiveDeviceWidth('width') //TODO
window.calendarEventsObject = new FullCalendar.Calendar(calendarEl, {
plugins: ['dayGrid'],
eventRender: function (eventInfo) {
console.log("eventInfo" )
console.log( eventInfo )
console.log("eventInfo.el" )
console.log( eventInfo.el )
var tooltip = new Tooltip(eventInfo.el, { // example : https://fullcalendar.io/docs/event-tooltip-demo
// title: eventInfo.event.extendedProps.description,
title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor', //eventInfo.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
eventInfo.el.querySelector('.fc-title').innerHTML += "<i class='fa fa-external-link pull-right'" +
" onclick=\"javascript:backendEvent.editCalendarEvent(event," + eventInfo.event.id + "); return" +
" false;\">Edit</i>";
},
events: eventsList,
// events: [],
header: {
left: 'LEFT98',
center: 'title123',
right: 'Right 444'
},
showNonCurrentDates: false,
editable: true,
allDaySlot: true,
selectable: true,
selectHelper: true,
selectOverlap: false,
fixedWeekCount: false,
aspectRatio: 0.4,
height: 700,
select: function (start, end) {
alert( "select:::"+var_dump(-50) )
var title = "Available";
var evid = SaveEvent(start, end, '1');
$('#events_calendar').fullCalendar('unselect');
},
eventClick: function (clickObj) {
alert( "eventClick clickObj.el::"+var_dump(clickObj.el) )
if (clickObj.el.href != "") {
// alert( "::"+var_dump(-4) )
let el_href = clickObj.el.href
clickObj.el.href = ""
window.open(el_href, "_blank");
// clickObj.event.preventDefault();
alert( "::"+var_dump(-41) )
return false;
}
return false;
},
});
window.calendarEventsObject.render(
{
backgroundColor: 'green',
textColor: 'yellow',
}
);
jQuery('.eo-fullcalendar').on('click', '.fc-event', function (e) {
e.preventDefault();
window.open(jQuery(this).attr('href'), '_blank');
});
} // function initFullCalendar() {
I know that when data are loaded with ajax (as in my case) it can raise issue with some jquery components.我知道当数据用 ajax 加载时(就像我的情况一样)它可能会引发一些 jquery 组件的问题。 Can it be that after I loaded data with ajax I have to init tooltip 1 more time?
是不是在我用ajax加载数据后我必须再初始化工具提示1?
Valid decision in my case was :在我的情况下,有效的决定是:
eventRender: function (eventInfo) {
$(eventInfo.el).tooltip({
title: "<i class=\"fa fa-users\"></i> <b>"+eventInfo.event.extendedProps.attendees_count+" attendee(s)</b>" +
" <br><smalUUl>"+eventInfo.event.extendedProps.description+"</smalUUl>",
html: true,
});
},
where description and attendees_count my custom fields sent to event.其中描述和参加者_计数我的自定义字段发送到事件。 Without any additive libs
没有任何附加库
eventAfterAllRender: function(view){
$('.has-tooltip').tooltip({container:'#calendar',placement:'top'});
},
You can put eventAfterAllRender to show tooltip您可以放置 eventAfterAllRender 来显示工具提示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.