Fullcalendar

Question

在 Fullcalendar 中将语言环境设置为日语并使用 dayGridMonth 视图时，为每一天添加单元格后缀“日”（表示天）。

我想去掉这一天的后缀字母，这样单元格的外观就只是数字了。

我翻阅了文档，但找不到。

可以通过将语言环境设置为 "ja" 在官方演示中检查此行为。
https://fullcalendar.io/docs/locale-demo

我希望我的日期单元格只显示数字，没有后缀。

Answer 1

我已经阅读了FullCalendar 的源代码。它使用 Intl.DateTimeFormat 来转换日期格式，如下所示。

https://github.com/fullcalendar/fullcalendar/blob/f86b5f33148cb43178e21c46a6ea814d128a88e1/src/core/datelib/formatting-native.ts#L165

我找不到如何自定义格式。一个可能的肮脏 hack 是 fork 存储库并删除以下代码后的“日”字符。

https://github.com/fullcalendar/fullcalendar/blob/e73621e5c9bcf6778c07cc5a29a4b0641d3ac46e/src/daygrid/DayGrid.ts#L390-L395

html = html.replace('日', '');

Answer 2

FullCalendar 中有一个名为dayCellDidMount 的选项，可以在添加dayCell 后调用它来执行某些操作。 https://fullcalendar.io/docs/day-cell-render-hooks

因此您可以在调用此函数时将原始的 dayText 替换为您的自定义文本。

代码示例：

var calendar = new FullCalendar.Calendar(calendarEl, {
...,
dayCellDidMount: function(info){              
          var day = moment(info.date).format('DD') // custom the text for example

          // hide the original one
          var originElement = info.el.querySelectorAll(".fc-daygrid-day-number")
          originElement.forEach(e => e.classList.add("d-none")  ); 
          
          // insert new text
          var targetElement = info.el.querySelectorAll(".fc-daygrid-day-top");
          targetElement.forEach(e => e.innerHTML = day );
      },
})

然后可以自定义css .fc-daygrid-day-top 视图

Fullcalendar - 使用日语时删除 dayGridMonth 视图中的日期后缀

Fullcalendar - Remove day suffix in dayGridMonth View when using Japanese

cjk