在 JS 中使用 fullcalendar 在鼠标 hover/enter 事件时添加带有事件详细信息的弹出窗口 window

Question

嘿，我已经努力了一段时间，现在正在尝试各种可能的方法来使用 fullcalendar 在鼠标悬停时添加弹出窗口 window，所有解决方案要么删除我的日历，要么都不起作用。我正在尝试在鼠标悬停的任何事件上方添加一个弹出窗口 window。请帮助:(

这是我的代码（添加了一个带有有效事件标题的警报）：

<!DOCTYPE html>

<script src='https://unpkg.com/popper.js/dist/umd/popper.min.js'></script>
<script src='https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js'></script>



<script src="../Scripts/ajaxCalls.js"></script>


<link href="../Style/jquery.dataTables.min.css" rel="stylesheet" />
<link href="../Style/StyleSheet.css" rel="stylesheet" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>


<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>


<meta charset="utf-8" />
<title>Schieffer - Home</title>

<link rel="apple-touch-icon" sizes="57x57" href="../img/favicon s/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="../img/favicon s/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="../img/favicon s/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="../img/favicon s/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="../img/favicon s/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="../img/favicon s/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="../img/favicon s/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="../img/favicon s/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="../img/favicon s/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="../img/favicon s/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="../img/favicon s/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="../img/favicon s/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="../img/favicon s/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">





<meta charset='utf-8' />
<link href='../packages/core/main.css' rel='stylesheet' />
<link href='../packages/daygrid/main.css' rel='stylesheet' />
<link href='../packages/timegrid/main.css' rel='stylesheet' />
<link href='../packages/list/main.css' rel='stylesheet' />
<script src='../packages/core/main.js'></script>
<script src='../packages/interaction/main.js'></script>
<script src='../packages/daygrid/main.js'></script>
<script src='../packages/timegrid/main.js'></script>
<script src='../packages/list/main.js'></script>
<script>


var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
today = yyyy + '-' + mm + '-' + dd;
var products = new Array();
var Orders = new Array();
$(document).ready(function () {
  ajaxCall("GET", "../api/Order", "", succGet, errorGet)
});

function succGet (data) {
  alert("success");
  console.log(data);
  for (o in data) {
    Orders.push('{title:"' + data[o]["Description"] + '",start:"2020-04-0' + o + '"} ');
    //products.push(
    //    {
    //        title: ''+data[o]["Description"],
    //        start: '2020-04-0' + (o + 1),
    //        description: 'Info: מוצר: '+data[o]["Description"] +'מק"ט: ' + data[o]["Makat"] + ', אורך: ' + data[o]["Length"] +' ס"מ .',
    //    })
  }
  alert(Orders);
}
function errorGet (err) {
  console.log(err);
}
document.addEventListener('DOMContentLoaded', function () {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    defaultDate: today,
    navLinks: true, // can click day/week names to navigate views

    weekNumbers: true,
    weekNumbersWithinDays: true,
    weekNumberCalculation: 'ISO',
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    events: [
      {
        title: 'ס.מסוע 750 מ"מ 4',
        start: '2020-04-04T12:00:00',
        description: 'dddddddd',
      }, {
        title: 'ס.מסוע 350 מ"מ 6',
        start: '2020-04-04T14:00:00',
      }, {
        title: 'ס.מסוע 900 מ"מ 3',
        start: '2020-04-04T17:00:00',
      }, {
        title: 'ס.מסוע 200 מ"מ 4',
        start: '2020-04-06T11:00:00',
      }, {
        title: 'ס.מסוע 650 מ"מ 6',
        start: '2020-04-06T15:00:00',
      }, {
        title: 'ס.מסוע 750 מ"מ 4',
        start: '2020-04-07T14:00:00',
      }, {
        title: 'ס.מסוע 400 מ"מ 1',
        start: '2020-04-09T09:00:00',
      },
    ],
    eventMouseEnter: function (arg) {
      //if (confirm('delete event?')) {
      //info.event.setProp('backgroundColor', '#00CCFF');

      alert(arg.event.title);
      //}
    }
  });
  calendar.render();
});

 body {
  margin: 40px 10px;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 900px;
  margin: 0 auto;
}

/*
i wish this required CSS was better documented :(
https://github.com/FezVrasta/popper.js/issues/674
derived from this CSS on this page: https://popper.js.org/tooltip-examples.html
*/

.popper,
.tooltip {
  position: absolute;
  z-index: 9999;
  background: #ffc107;
  color: black;
  width: 150px;
  border-radius: 3px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  padding: 10px;
  text-align: center;
}

.style5 .tooltip {
  background: #1e252b;
  color: #ffffff;
  max-width: 200px;
  width: auto;
  font-size: 0.8rem;
  padding: 0.5em 1em;
}

.popper .popper__arrow,
.tooltip .tooltip-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  margin: 5px;
}

.tooltip .tooltip-arrow,
.popper .popper__arrow {
  border-color: #ffc107;
}

.style5 .tooltip .tooltip-arrow {
  border-color: #1e252b;
}

.popper[x-placement^="top"],
.tooltip[x-placement^="top"] {
  margin-bottom: 5px;
}

.popper[x-placement^="top"] .popper__arrow,
.tooltip[x-placement^="top"] .tooltip-arrow {
  border-width: 5px 5px 0 5px;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  bottom: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}

.popper[x-placement^="bottom"],
.tooltip[x-placement^="bottom"] {
  margin-top: 5px;
}

.tooltip[x-placement^="bottom"] .tooltip-arrow,
.popper[x-placement^="bottom"] .popper__arrow {
  border-width: 0 5px 5px 5px;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
  top: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}

.tooltip[x-placement^="right"],
.popper[x-placement^="right"] {
  margin-left: 5px;
}

.popper[x-placement^="right"] .popper__arrow,
.tooltip[x-placement^="right"] .tooltip-arrow {
  border-width: 5px 5px 5px 0;
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  left: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}

.popper[x-placement^="left"],
.tooltip[x-placement^="left"] {
  margin-right: 5px;
}

.popper[x-placement^="left"] .popper__arrow,
.tooltip[x-placement^="left"] .tooltip-arrow {
  border-width: 5px 0 5px 5px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  right: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}

</style>

<script>



</script>




<ul>
    <li style="padding-top:33px; margin-left:-30px;"> <a href="Home.html"><img style="width:300px; height:80px" src="../img/schieffer_logo trans.png" href="Home.html" /></a></li>
    <li class="navbtn"><a href="Home.html"> <img src="../img/btnnn - orders - trans.png" /></a></li>
    <li class="navbtn"><a href="Home.html"> <img src="../img/btnnn - report - trans.png" /></a></li>
    <li class="navbtn"><a href="Home.html"> <img src="../img/btnnn - simulation - trans.png" /></a></li>
    <li class="navbtn"><a href="Home.html"><img src="../img/btnnn - statistics - trans.png" /></a></li>
    <li class="line-navbar"></li>
</ul>

<div class="header-style">תכנית יצור נוכחית</div>
<div class="gray-background">
    <div id='calendar'></div>
</div>


    <div id='calendar'></div>

Answer 1

既然您似乎在使用 bootstrap 3，那么您不需要 popper.js 或 tooltip.js，或任何关联的 CSS。只需使用 bootstrap 的内置工具提示功能：https://getbootstrap.com/docs/3.4/javascript/#tooltips。

您可以在 eventRender 回调期间将工具提示附加到 fullCalendar 事件。

我希望这样的东西能起作用：

eventRender: function(info)
{
  $(info.el).tooltip({ title: info.event.title });
}

N.B。要获得更复杂的布局，或将更多信息放入显示的内容中，您还可以考虑使用 popover。设置几乎相同。

在 JS 中使用 fullcalendar 在鼠标 hover/enter 事件时添加带有事件详细信息的弹出窗口 window

Adding a popup window with event details when mouse hover/enter event using fullcalendar in JS

html

javascript

css

fullcalendar

fullcalendar-4