FullCalendar locale在Chrome与Edge中不生效的问题求助

问题根源 #

Chrome/Edge的Intl.DateTimeFormat API对部分小众语言的星期名称支持不完善，FullCalendar自动检测locale时会依赖该API，导致星期未被正确翻译；而Firefox的Intl实现覆盖了更多语言的本地化数据，因此显示正常。此外，部分语言的官方FullCalendar locale包可能缺少星期相关的翻译字段，进一步加剧了这个问题。

修复步骤 #

1. 显式指定Locale并确保导入对应语言包 #

不要依赖浏览器自动检测locale，初始化日历时直接指定目标语言，并确保正确导入官方locale模块：

// 导入哈萨克语locale
import '@fullcalendar/core/locales/kk';
// 或阿尔巴尼亚语locale
// import '@fullcalendar/core/locales/sq';

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    locale: 'kk', // 替换为 'sq' 测试阿尔巴尼亚语
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    }
    // 其他日历配置
  });
  calendar.render();
});

2. 自定义Locale补全缺失的星期翻译 #

如果官方locale包缺少星期相关字段，手动定义包含完整星期名称的locale并注册：

示例：自定义哈萨克语Locale

import { Calendar } from '@fullcalendar/core';

// 自定义哈萨克语本地化配置，补全星期名称
const kkCustomLocale = {
  code: 'kk',
  week: {
    dow: 1, // 哈萨克语习惯以周一为一周起始
    doy: 7
  },
  buttonText: {
    prev: 'Алдыңғы',
    next: 'Келесі',
    today: 'Бүгін',
    month: 'Ай',
    week: 'Апта',
    day: 'Күн',
    list: 'Тізім'
  },
  weekText: 'Апта',
  allDayText: 'Күні бойы',
  moreLinkText: n => `+ тағы ${n}`,
  noEventsText: 'Көрсету үшін оқиғалар жоқ',
  // 完整星期名称（长/短/极简格式）
  weekdays: ['Жексенбі', 'Дүйсенбі', 'Сейсенбі', 'Сәрсенбі', 'Бейсенбі', 'Жұма', 'Сенбі'],
  weekdaysShort: ['Жкс', 'Дүй', 'Сей', 'Сәр', 'Бей', 'Жұм', 'Сен'],
  weekdaysMin: ['Жк', 'Дү', 'Се', 'Сә', 'Бе', 'Жұ', 'Се']
};

// 注册自定义Locale
Calendar.globalLocales.push(kkCustomLocale);

// 初始化日历
document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    locale: 'kk',
    // 其他配置
  });
  calendar.render();
});

示例：自定义阿尔巴尼亚语Locale

import { Calendar } from '@fullcalendar/core';

const sqCustomLocale = {
  code: 'sq',
  week: {
    dow: 1,
    doy: 4
  },
  buttonText: {
    prev: 'mbrapa',
    next: 'përpara',
    today: 'sot',
    month: 'Muaj',
    week: 'Javë',
    day: 'Ditë',
    list: 'Listë'
  },
  weekText: 'Ja',
  allDayText: 'Gjithë ditën',
  moreLinkText: n => `+ më tepër ${n}`,
  noEventsText: 'Nuk ka ngjarje për të shfaqur',
  weekdays: ['E Diel', 'E Hënë', 'E Martë', 'E Mërkurë', 'E Enjte', 'E Premte', 'E Shtunë'],
  weekdaysShort: ['Die', 'Hën', 'Mar', 'Mër', 'Enj', 'Pre', 'Sht'],
  weekdaysMin: ['Di', 'Hë', 'Ma', 'Më', 'En', 'Pr', 'Sh']
};

Calendar.globalLocales.push(sqCustomLocale);

// 初始化日历逻辑同上

3. 验证浏览器语言设置（可选） #

确保浏览器的首选语言列表中包含目标语言，但无需强制设为首位——因为我们已经显式指定了locale，该步骤主要用于排除极端场景下的冲突。

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