如何在FullCalendar自定义按钮点击时添加下拉菜单

FullCalendar本身没有内置下拉菜单组件，我们可以通过手动添加HTML结构、CSS样式和JavaScript逻辑来实现这个需求，以下是完整的实现方案：

1. 添加下拉菜单的HTML结构 #

在页面的合适位置（比如日历容器附近）添加隐藏的下拉菜单：

<div id="customDropdown" class="fc-custom-dropdown">
  <div class="fc-dropdown-item" data-action="option1">Option 1</div>
  <div class="fc-dropdown-item" data-action="option2">Option 2</div>
  <div class="fc-dropdown-item" data-action="option3">Option 3</div>
</div>

2. 修改FullCalendar配置，绑定按钮点击事件 #

更新你的日历初始化代码，在自定义按钮的click事件中处理下拉菜单的显示、隐藏和定位：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const dropdownEl = document.getElementById('customDropdown');

  const calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'customButton'
    },
    customButtons: {
      customButton: {
        text: 'Options',
        click: function() {
          // 切换下拉菜单的显示状态
          dropdownEl.classList.toggle('fc-dropdown-show');
          
          // 将下拉菜单定位到自定义按钮的正下方
          const buttonRect = this.el.getBoundingClientRect();
          dropdownEl.style.top = `${buttonRect.bottom + window.scrollY}px`;
          dropdownEl.style.left = `${buttonRect.left + window.scrollX}px`;
        }
      }
    }
  });

  calendar.render();

3. 处理下拉菜单选项的点击逻辑 #

添加事件监听，根据用户选择的选项执行对应操作：

// 监听下拉选项点击
  dropdownEl.addEventListener('click', function(e) {
    const targetItem = e.target.closest('.fc-dropdown-item');
    if (!targetItem) return;

    const action = targetItem.dataset.action;
    switch(action) {
      case 'option1':
        // 这里替换成Option 1的业务逻辑
        console.log('触发Option 1操作');
        break;
      case 'option2':
        console.log('触发Option 2操作');
        break;
      case 'option3':
        console.log('触发Option 3操作');
        break;
    }

    // 点击选项后隐藏下拉菜单
    dropdownEl.classList.remove('fc-dropdown-show');
  });

4. 添加点击页面其他区域隐藏菜单的逻辑 #

避免下拉菜单一直显示，点击页面其他地方时自动隐藏：

// 点击页面空白处隐藏下拉菜单
  document.addEventListener('click', function(e) {
    const customButton = document.querySelector('.fc-customButton-button');
    if (!customButton.contains(e.target) && !dropdownEl.contains(e.target)) {
      dropdownEl.classList.remove('fc-dropdown-show');
    }
  });
});

5. 添加CSS样式，适配FullCalendar风格 #

为下拉菜单添加样式，让它和FullCalendar的视觉风格保持一致：

.fc-custom-dropdown {
  display: none;
  position: absolute;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  z-index: 1000;
  min-width: 140px;
}

.fc-dropdown-show {
  display: block;
}

.fc-dropdown-item {
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: #1e293b;
}

.fc-dropdown-item:hover {
  background-color: #f1f5f9;
}

关键说明 #

• 通过classList.toggle控制下拉菜单的显示/隐藏状态
• 使用getBoundingClientRect()获取按钮的位置，确保下拉菜单精准定位在按钮下方
• 利用data-action属性区分不同选项，便于后续扩展更多操作
• 添加全局点击事件，实现点击外部区域关闭菜单的交互

内容的提问来源于stack exchange，提问作者Heisenberg