Angular Full Calendar点击事件时打开下拉菜单的实现方案

核心思路 #

借助FullCalendar的eventClick回调，结合Angular的数据绑定与模板逻辑控制下拉菜单的显示状态，全程无需依赖jQuery。

具体实现步骤 #

1. 配置FullCalendar的点击回调 #

在组件里初始化FullCalendar时，定义eventClick函数，记录点击事件的信息和位置，触发下拉菜单的显示。

示例代码：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { CalendarOptions } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css']
})
export class CalendarComponent {
  calendarOptions: CalendarOptions = {
    plugins: [dayGridPlugin],
    initialView: 'dayGridMonth',
    events: [
      { title: '项目评审', start: '2024-05-15' },
      { title: '团队会议', start: '2024-05-20' }
    ],
    eventClick: (info) => {
      // 保存当前点击的事件
      this.selectedEvent = info.event;
      // 获取事件元素的位置，用于定位下拉菜单
      const eventRect = info.el.getBoundingClientRect();
      this.dropdownStyle = {
        top: `${eventRect.bottom + window.scrollY}px`,
        left: `${eventRect.left + window.scrollX}px`
      };
      // 打开下拉菜单
      this.showDropdown = true;
    }
  };

  selectedEvent: any;
  showDropdown = false;
  dropdownStyle: { top: string; left: string } = { top: '0px', left: '0px' };
}

2. 模板中实现下拉菜单 #

用*ngIf控制菜单显示，通过[ngStyle]绑定位置，把菜单定位到点击的事件下方。

示例模板：

<full-calendar [options]="calendarOptions"></full-calendar>

<!-- 事件下拉菜单 -->
<div 
  *ngIf="showDropdown"
  #eventDropdown
  class="event-dropdown"
  [ngStyle]="dropdownStyle"
>
  <h4>{{ selectedEvent.title }}</h4>
  <div class="dropdown-actions">
    <button (click)="editEvent()">编辑</button>
    <button (click)="deleteEvent()">删除</button>
    <button (click)="showDropdown = false">关闭</button>
  </div>
</div>

3. 添加菜单基础样式 #

给下拉菜单设置绝对定位和层级，避免被日历组件遮挡：

.event-dropdown {
  position: absolute;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  padding: 12px;
  z-index: 999;
  min-width: 180px;
}

.dropdown-actions button {
  width: 100%;
  margin: 4px 0;
  padding: 6px;
  border: none;
  border-radius: 4px;
  background-color: #f5f5f5;
  cursor: pointer;
}

.dropdown-actions button:hover {
  background-color: #e0e0e0;
}

4. 点击外部区域关闭菜单（可选） #

如果需要点击菜单外自动关闭，可添加全局点击监听：

@ViewChild('eventDropdown') dropdownRef!: ElementRef;

ngOnInit() {
  document.addEventListener('click', (event) => {
    if (this.showDropdown && !this.dropdownRef.nativeElement.contains(event.target)) {
      this.showDropdown = false;
    }
  });
}

关键注意事项 #

• 直接用原生JS获取DOM元素位置，替代jQuery的offset()方法，完全符合Angular的开发规范
• 下拉菜单定位时要加上页面滚动距离，避免滚动后位置偏移
• 通过数据绑定控制菜单显示状态，不要直接操作DOM

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