我正在使用 FullCalendar 开发一个项目，我需要添加一个下拉菜单，单击标题中的自定义按钮时会显示该菜单。我已成功添加自定义按钮，但我在下拉功能方面遇到困难。
这是迄今为止我添加自定义按钮的内容：
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'customButton'
},
customButtons: {
customButton: {
text: 'Options',
click: function() {
// This is where I need to show the dropdown
console.log('Custom button clicked!');
}
}
}
我不知道如何从这里继续显示下拉菜单。理想情况下，下拉菜单应包含“选项 1”、“选项 2”和“选项 3”等选项。我还想处理这些选项的选择，以根据用户的选择执行不同的操作。
有人实现了类似的功能或者可以提供如何实现这一目标的指导吗？任何帮助或示例将不胜感激！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FullCalendar with Dropdown Menu</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css" rel="stylesheet">
<style>
.dropdown-menu {
display: none;
position: absolute;
background-color: white;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-menu button {
background-color: white;
color: black;
border: none;
cursor: pointer;
padding: 12px 16px;
text-align: left;
width: 100%;
}
.dropdown-menu button:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<div id="calendar"></div>
<div id="dropdownMenu" class="dropdown-menu">
<button onclick="optionSelected('Option 1')">Option 1</button>
<button onclick="optionSelected('Option 2')">Option 2</button>
<button onclick="optionSelected('Option 3')">Option 3</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var dropdownMenu = document.getElementById('dropdownMenu');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'customButton'
},
customButtons: {
customButton: {
text: 'Options',
click: function(event) {
var rect = event.target.getBoundingClientRect();
dropdownMenu.style.display = 'block';
dropdownMenu.style.left = rect.left + 'px';
dropdownMenu.style.top = (rect.bottom + window.scrollY) + 'px';
}
}
}
});
calendar.render();
// Hide dropdown when clicking outside
document.addEventListener('click', function(event) {
if (!event.target.matches('.fc-customButton-button')) {
dropdownMenu.style.display = 'none';
}
});
});
function optionSelected(option) {
alert(option + ' selected!');
// Perform actions based on the selected option
document.getElementById('dropdownMenu').style.display = 'none';
}
</script>
</body>
</html>