Angular FullCalendar v5.10.2如何为日历事件添加悬停效果

问题描述 #

在Angular项目中使用版本为^5.10.2的FullCalendar组件开发时，需要为日历渲染的事件添加悬停交互效果，尝试通过配置项绑定eventMouseEnter、eventMouseLeave回调函数实现该效果，但无法成功为事件添加对应悬停样式，目标效果参考：

现有实现代码 #

HTML模板

<div class="card-body p-0">
  <full-calendar [options]="calendarOptions"></full-calendar>
</div>

TS逻辑

export class FullcalendarviewComponent implements OnInit {
  constructor(
    private modalService: BsModalService,
    private taskservice: TasksService,
    public datepipe: DatePipe,
    public _router: Router
  ) { }

  ngOnInit(): void {
    this.getTaskList();
  }
 
  getTaskList() {
    this.taskservice.getallTaskCalendar().subscribe(data => {
      this.tasklist = data.Data[1];
      console.log('Task API data of full calendar', this.tasklist);
      this.tasklist = this.tasklist.map((e: any) => ({
        Id: e.TaskId,
        title: e.TaskName,
        start: e.TaskDueDate,
        end: this.datepipe.transform(e.TaskDueDate, 'YYYY-MM-dd') + "T24:00:00",
        description: e.TaskDetails,
        For: e.AccountName,
        Type: e.TaskType,
        allDay: true
      }));
      this.calendarOptions = {
        eventMouseEnter: this.handleEventMouseEnter.bind(this),
        eventMouseLeave: this.handleEventMouseLeave.bind(this),
        eventClick: this.Eventfunc.bind(this),  
        events: this.tasklist,    
      };
    });
  }

  eventType: any;
  handleDateClick(arg) {  
    this.modalService.show(CalendarAddTaskModalComponent);
  }

  handleEventMouseEnter() {
    console.log('Mouse entered');
  }

  handleEventMouseLeave() {
    console.log('Mouse out'); 
  } 
}

修复方案 #

现有代码存在3个核心问题，按以下步骤修改即可：

• 未注册交互插件：FullCalendar v5的鼠标事件回调依赖@fullcalendar/interaction插件，未导入的话回调函数根本不会触发
• 回调未接收事件参数：鼠标事件回调会返回包含当前事件DOM节点的参数对象，未接收参数就无法操作元素修改样式
• 仅打印日志无样式逻辑：现有回调只有控制台输出，没有实际操作样式的代码

具体修改步骤 #

1. 在组件样式文件中提前定义好悬停样式

/* 悬停样式可按需自定义 */
.fc-event-custom-hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  z-index: 99 !important;
  transition: all 0.2s ease;
}

2. 导入交互插件，补充到日历配置的插件列表中

// 顶部新增导入
import interactionPlugin from '@fullcalendar/interaction';
// 如果你用了dayGrid、timeGrid等视图插件，和interactionPlugin放在一起即可

// 修改getTaskList中的calendarOptions配置
this.calendarOptions = {
  plugins: [interactionPlugin], // 新增插件配置
  eventMouseEnter: this.handleEventMouseEnter.bind(this),
  eventMouseLeave: this.handleEventMouseLeave.bind(this),
  eventClick: this.Eventfunc.bind(this),  
  events: this.tasklist,    
};

3. 修改鼠标事件回调，接收参数操作DOM添加/移除样式类

handleEventMouseEnter(info: { el: HTMLElement }) {
  // info.el 为当前触发事件的DOM节点
  info.el.classList.add('fc-event-custom-hover');
  // 自定义tooltip、详情浮层等逻辑都可以在这里扩展
}

handleEventMouseLeave(info: { el: HTMLElement }) {
  info.el.classList.remove('fc-event-custom-hover');
}

额外优化建议：不要在异步接口返回后整个替换calendarOptions对象，很容易出现Angular变更检测不触发、配置更新不生效的问题。可以在ngOnInit中先初始化好所有基础配置（插件、回调等），接口返回数据后只更新calendarOptions.events = this.tasklist即可，稳定性更高。

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