（Fullcalendar 4 VueJs）交换标题标题格式月和日答案

【问题标题】：(Fullcalendar 4 VueJs) Swap header titleFormat Month and Day（Fullcalendar 4 VueJs）交换标题标题格式月和日
【发布时间】：2019-11-29 10:10:28
【问题描述】：

我需要交换标题标题，默认情况下“月”排在第一位，“日”排在第二位。我需要反过来。

我用这个道具：

 :titleFormat="{ day: '2-digit', month: 'long' }"

但无论如何，“月份”都会排在第一位。我在这里找到了解决方案：https://github.com/fullcalendar/fullcalendar/issues/3443 但是如何针对 VueJS 方式进行调整？

提前谢谢你。

【问题讨论】：

github.com/fullcalendar/fullcalendar/issues/3443 与您无关，因为这是在讨论 fullCalendar v3 的格式选项。在 v4 中，情况又不同了。
不幸的是，在 v4 中似乎没有创建完全自定义标题的工具（例如，列标题）。也许应该是feature request
P.S.作为最后的手段，我想你可以简单地使用 JavaScript 直接修改包含标题的 div 的内容，而不是使用 API。但是您需要确保每次日期范围更改时自己更新它 - 因为您可能可以在 fullCalendar 中处理 datesRender 事件。
我明白了。是的，我正在考虑直接使用带有标题的JS来交换它，标题只是一个标签“
July 08 - 14
”所以我需要解析字符串来交换它。我认为可以有更好的方法。谢谢你，阿迪森！

标签： javascript date fullcalendar fullcalendar-4

【解决方案1】：

对我有帮助的个人解决方案是：

   datesRender(){
    let elTitle = this.$refs.fullCalendar.$el.querySelector('.fc-center h2');
    let elTitleText = elTitle.innerHTML;
    elTitle.innerHTML = elTitleText.replace(/^([a-z]+) (\d{2,2}\s?-\s?\d{2,2})$/i, '$2 $1');
  },

这将字符串“July 08 - 14”交换为“08 - 14 July”。

【讨论】：