我现在已经使用 FullCalendar 配置了一段时间,但我已经达到了一个我无法弄清楚的地步。我想在最终用户将鼠标悬停在事件上时显示工具提示。我想在事件的工具提示中提供更多信息,例如电话联系号码等。
我尝试了许多我能找到的不同选项。
以下链接列表为例。
FullCalendar event popup
http://jsfiddle.net/m54g5aen/
Fullcalendar / eventdidmount - issue with "more link"
我将通过 PHP 脚本中的 JSON 数组提取事件。 这是我的日历渲染代码。
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
height: 550,
slotDuration: {minutes: 15},
nowIndicator: true,
allDaySlot: false,
eventBackgroundColor: '#916FDF',
slotMinTime: "08:00:00",
slotMaxTime: "20:00:00",
displayEventEnd: false,
initialView: 'timeGridWeek',
events: <?php print json_encode($events); ?>,
eventDidMount: function(info) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
},
customButtons: {
addNewAppointment: {
text: 'New Appt',
click: function() {
window.location.href="../client/newAppointment.php";
}
}
},
headerToolbar: {
left: 'title',
center: 'dayGridMonth timeGridWeek',
right: 'prev next today addNewAppointment'
}
});
calendar.render();
});
</script>
我的 PHP 拉取事件如下:
<?php
require_once('../db_connect.php');
// Check to see if the session is already started.
if (session_status() === PHP_SESSION_NONE) {
session_start();
}
$query = 'SELECT
CONCAT(client.cl_fName, " ", client.cl_lName) AS "title",
CONCAT(appointment.sched_date,"T", appointment.start_time) AS "start",
CONCAT(appointment.sched_date,"T", appointment.end_time) AS "end",
CONCAT("TEST", " DESCRIPTION") AS "description"
FROM
appointment, client
WHERE appointment.client_id = client.client_id';
$statement = $db1->prepare($query);
$statement->execute();
$events = $statement->fetchAll();
$statement->closeCursor();
?>
我感谢所有建议。预先感谢您。
最佳答案
尝试使用弹出框而不是工具提示,如果您想向其中添加更多信息,它比工具提示更好。
将您的eventDidMount
更改为
eventDidMount: function (info) {
$(info.el).popover({
title: info.event.title,
placement: 'top',
trigger: 'hover',
content: 'more info on the popover if you want',
container: 'body'
});
}
关于fullcalendar - 事件工具提示未显示在 FullCalendar 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67079537/