FullCalendar v6中dateClick不属于CalendarOptions类型的问题解决求助

算力阿峰

2026-8-4

解决FullCalendar中dateClick属性不存在于CalendarOptions类型的错误

问题原因

你遇到的TypeScript错误，是因为dateClick属于FullCalendar的交互功能，需要依赖interaction插件才能启用。未导入该插件时，CalendarOptions类型定义中不会包含dateClick属性，因此触发类型校验失败。

解决步骤

安装interaction插件（如果尚未安装）：
```
npm install @fullcalendar/interaction
```

修改代码，导入并添加插件：
在你的组件代码中，导入interactionPlugin并添加到plugins数组里：

import { CalendarOptions } from '@fullcalendar/angular';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import interactionPlugin from '@fullcalendar/interaction'; // 新增导入

calendarOptions: CalendarOptions = {
    plugins: [ dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin ], // 添加该插件
    initialView: 'dayGridMonth',
    headerToolbar: {
      left: 'prev today next',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
    },
    weekends: true,
    events: [],
    locale:'vi',
    dayMaxEvents: true,
    selectable: true,
    editable: true,
    selectMirror: true,
    select: function(info) {
      alert('selected ' + info.startStr + ' to ' + info.endStr);
      console.log("mạnh đã ở đây")
    },
    dateClick: function(arg){
      alert('date click');
    }
};