无需CDN配置FullCalendar离线本地化的问题咨询

云原生阿岚

2026-6-16

解决FullCalendar离线本地化（法语）的语法错误与翻译不全问题

问题根源

你加载的fr.js是ES模块版本，而你使用的FullCalendar是全局变量版（index.global.min.js）。浏览器直接加载ES模块文件时，会因不识别export关键字抛出语法错误，且ES模块无法将语言注册到全局的FullCalendar对象，导致仅部分翻译生效。

正确配置步骤

1. 下载对应版本的全局版本地化文件

获取FullCalendar 6.1.15版本的全局变量版法语本地化文件，文件名应为fr.global.min.js（压缩版）或fr.global.js（未压缩版），将文件放到Django项目的static/fullcalendar/fullcalendar-6.1.15/locales/目录下。

2. 调整脚本引入顺序

确保先加载FullCalendar核心文件，再加载全局版本地化文件：

<script src="{% static 'fullcalendar/fullcalendar-6.1.15/index.global.min.js' %}"></script>
<script src="{% static 'fullcalendar/fullcalendar-6.1.15/locales/fr.global.min.js' %}"></script>

3. 正确初始化日历

初始化时指定locale: 'fr'，此时所有文本（包括「today」按钮、月份名称、星期全称等）都会被正确翻译：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    locale: 'fr',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    }
    // 其他日历配置项
  });
  calendar.render();
});