Question

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

我想删除这一天的后缀字母，以便该单元格的外观只是数字。

我浏览了文档，但是找不到。

可以在官方演示中通过将语言环境设置为“ 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

我找不到如何自定义格式。可能的肮脏技巧是在以下代码后派生存储库并删除“日”字符。

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视图中删除日期后缀

2 个答案: