Svelte中引入FullCalendar脚本无法识别的问题求解

核心原因 #

Svelte组件的执行时机与全局脚本加载顺序不匹配：组件内的脚本会在DOM渲染前执行，DOMContentLoaded事件可能早于组件挂载触发，导致初始化时找不到DOM元素或FullCalendar脚本未加载完成；另外直接引用全局变量时，需要明确从window对象获取。

以下是几种可行的解决办法：

方案1：使用ES模块导入（推荐） #

通过npm安装FullCalendar的官方模块，符合Svelte的模块化规范，避免全局变量问题：

1. 安装依赖

npm install @fullcalendar/core @fullcalendar/daygrid

2. 在Svelte组件中使用

<script>
  import { onMount } from 'svelte';
  import { Calendar } from '@fullcalendar/core';
  import dayGridPlugin from '@fullcalendar/daygrid';
  // 导入样式文件
  import '@fullcalendar/core/main.css';
  import '@fullcalendar/daygrid/main.css';

  onMount(() => {
    const calendarEl = document.getElementById('calendar');
    const calendar = new Calendar(calendarEl, {
      plugins: [dayGridPlugin],
      initialView: 'dayGridMonth'
    });
    calendar.render();
  });
</script>

<div id='calendar'></div>

方案2：动态加载静态资源并配合onMount #

如果坚持使用本地静态资源，通过动态加载脚本并等待加载完成后初始化，确保顺序正确：

<script>
  import { onMount } from 'svelte';

  onMount(async () => {
    // 加载样式
    const styleLink = document.createElement('link');
    styleLink.rel = 'stylesheet';
    styleLink.href = './fullcalendar/main.css';
    document.head.appendChild(styleLink);

    // 加载FullCalendar脚本并等待完成
    const script = document.createElement('script');
    script.src = './fullcalendar/main.js';
    document.head.appendChild(script);
    await new Promise(resolve => script.onload = resolve);

    // 初始化日历
    const calendarEl = document.getElementById('calendar');
    const calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth'
    });
    calendar.render();
  });
</script>

<div id='calendar'></div>

方案3：修正全局变量引用与执行时机 #

若仍用svelte:head导入资源，需明确从window获取FullCalendar，并在组件挂载后检查变量是否存在：

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    // 确保全局变量已加载
    if (window.FullCalendar) {
      const calendarEl = document.getElementById('calendar');
      const calendar = new window.FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth'
      });
      calendar.render();
    } else {
      // 脚本未加载完成时重试
      setTimeout(() => onMount(), 100);
    }
  });
</script>

<svelte:head>
  <link href='./fullcalendar/main.css' rel='stylesheet' />
  <script src='./fullcalendar/main.js'></script>
</svelte:head>

<div id='calendar'></div>

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