如何自定义可在FullCalendar事件回调中调用的函数（Angular5场景）

嘿，我来帮你把这段Angular 5结合FullCalendar的代码整理好，确保你的可复用函数能在多个回调里顺畅工作～

首先先修正你代码里的小笔误（eventDargStart应该是eventDragStart），然后调整写法避免上下文绑定问题，让mySelectThisEvent能在多个回调里正常调用：

import { Component, OnInit } from '@angular/core';
// 确保已引入jQuery和FullCalendar相关依赖
declare var $: any;

@Component({
  selector: 'app-calendar-component',
  templateUrl: './calendar-component.component.html',
  styleUrls: ['./calendar-component.component.css']
})
export class CalendarComponent implements OnInit {

  ngOnInit(): void {
    $('#calendar').fullCalendar({
      // 这里可以添加FullCalendar的基础配置，比如header、defaultView等
      eventClick: (event, jsEvent, view) => {
        this.mySelectThisEvent(event);
        // 这里写eventClick独有的额外逻辑
      },
      eventResizeStart: (event, jsEvent, ui, view) => {
        this.mySelectThisEvent(event);
        // 这里写eventResizeStart独有的额外逻辑
      },
      eventDragStart: (event, jsEvent, ui, view) => {
        this.mySelectThisEvent(event);
        // 这里写eventDragStart独有的额外逻辑
      }
    });
  }

  // 你的可复用事件处理函数
  mySelectThisEvent(event: any): void {
    // 这里写通用操作逻辑，比如高亮事件、同步数据、弹窗提示等
    console.log('当前选中的事件:', event);
    // 也可以直接对FullCalendar进行操作，比如修改事件样式
    $(event.el).css('border-color', '#ff0000');
  }
}

几个关键细节要注意： #

• 用箭头函数绑定上下文：FullCalendar的回调如果用普通function()，里面的this会指向FullCalendar实例，就访问不到你组件里的mySelectThisEvent了。换成箭头函数=>后，this会指向Angular组件实例，就能正常调用你的复用函数。
• 统一函数调用：不管是点击、拖拽开始还是调整大小开始，都先调用mySelectThisEvent处理通用逻辑，再在各自回调里写专属逻辑，完美实现复用。
• 依赖检查：确保你已经通过npm安装了jQuery和FullCalendar，并且在angular.json的scripts里配置了对应的脚本路径，不然$('#calendar')会找不到对应的方法。

这样你的可复用函数就能在多个FullCalendar回调里稳定工作啦～

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