SPFx React函数组件集成FullCalendar与Font Awesome求助

1. 通用前置操作 #

先安装FullCalendar相关依赖包：

npm install @fullcalendar/react @fullcalendar/daygrid @fullcalendar/interaction

2. 函数组件集成实现 #

创建函数组件并导入所需模块：

import * as React from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

const CalendarFunction: React.FC = () => {
  const handleDateClick = (info: any) => {
    alert(`点击日期：${info.dateStr}`);
  };

  return (
    <div style={{ padding: '20px' }}>
      <FullCalendar
        plugins={[dayGridPlugin, interactionPlugin]}
        initialView="dayGridMonth"
        dateClick={handleDateClick}
        events={[
          { title: '测试事件1', date: '2024-05-10' },
          { title: '测试事件2', date: '2024-05-15' }
        ]}
      />
    </div>
  );
};

export default CalendarFunction;

在SPFx WebPart的render方法中直接引用该组件即可。

3. 类组件集成实现 #

基于你找到的示例调整为标准类组件写法：

import * as React from 'react';
import { Component } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

export default class CalendarClass extends Component {
  handleDateClick = (info: any) => {
    alert(`点击日期：${info.dateStr}`);
  };

  render() {
    return (
      <div style={{ padding: '20px' }}>
        <FullCalendar
          plugins={[dayGridPlugin, interactionPlugin]}
          initialView="dayGridMonth"
          dateClick={this.handleDateClick}
          events={[
            { title: '类组件测试事件', date: '2024-05-20' }
          ]}
        />
      </div>
    );
  }
}

1. 无npm包引入Font Awesome的方法 #

• 在SPFx项目的src/webparts/[你的WebPart名称]/目录下创建assets文件夹，放入Font Awesome的CSS文件（如all.min.css）和对应的字体文件。
• 在组件的CSS文件中导入Font Awesome样式：

@import './assets/all.min.css';

• 直接在组件中使用图标：

<i className="fa-solid fa-calendar"></i>

2. 自定义字体404报错修复 #

你遇到的是字体文件路径错误问题，按以下步骤调整：

1. 将字体文件放在src/webparts/[你的WebPart名称]/assets/fonts/目录下。
2. 调整CSS中的路径引用：

@font-face {
    font-family: 'Work Sans Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Work Sans Regular'), url('./assets/fonts/WorkSans-Regular.woff2') format('woff2');
}

.root-div {
    font-family: 'Work Sans Regular' !important;
}

3. 确保config/config.json中配置了静态资源打包规则：

"staticAssets": {
  "include": [
    "src/webparts/[你的WebPart名称]/assets/**/*"
  ]
}

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