Fullcalendar 4 VueJS：如何交换标题格式的月与日顺序

嘿，我之前也踩过这个坑！FullCalendar的titleFormat用普通对象配置时，并不会严格按照你写的键顺序渲染，而是遵循它内置的优先级逻辑（默认就是月在前、日在后），所以单纯调整对象里的键顺序根本没用。

给你两种Vue里的适配方案，亲测有效：

方案一：用数组格式强制指定顺序 #

数组格式能让FullCalendar严格按照你定义的顺序渲染标题内容，直接把日期的配置放在数组第一位就行：

<FullCalendar
  <!-- 其他必要属性，比如plugins、views等 -->
  :titleFormat="[{ day: '2-digit' }, { month: 'long' }]"
/>

这样就能实现「XX日 某某月」的显示顺序了。

方案二：自定义回调函数（完全可控） #

如果需要更灵活的格式（比如加自定义分隔符、适配多语言），可以用回调函数直接返回拼接好的字符串，想怎么排就怎么排：

<FullCalendar
  <!-- 其他属性 -->
  :titleFormat="(dateInfo) => {
    // 以中文本地化为例，获取日期和月份
    const day = dateInfo.date.getDate().toString().padStart(2, '0');
    const month = dateInfo.date.toLocaleString('zh-CN', { month: 'long' });
    // 按需求顺序拼接
    return `${day}日 ${month}`;
  }"
/>

数组写法简洁直接，函数写法自由度更高，选哪种全看你的具体需求~

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