完整日历自定义标题工具栏

Question

我在 React 应用程序中使用带有以下 headerToolbar 配置的日历组件：

headerToolbar={{
  start: "TODAY prev,next",
  center: "TITLE",
  end: "DAYGRIDMONTH,timeGridWeek,timeGridDay",
}}

我想以大写形式显示“今天”、“周”、“日”和“月”，但简单地在配置中将它们更改为大写是行不通的。如何在日历组件的 headerToolbar 中实现这种格式设置？

Answer 1

您放入标题工具栏中的值是视图名称，而不是口头描述。它们是特定的且区分大小写。可以将它们想象为 ID，告诉 fullCalendar 使用知道要加载哪个视图，而不是向用户显示的内容。如果您注意到，在大多数情况下，您在此处使用的字符串与屏幕上显示的字符串不匹配（特别是如果您处于非英语语言环境中！）。

没有直接的方法可以更改默认视图或按钮的描述。您可以做的是创建自定义视图和/或自定义按钮，其设置很大程度上与默认视图匹配，除了文本描述。

如果您想让标题以大写形式显示，您应该查看 标题格式 选项和 日期格式 文档。这可能需要使用额外的插件来启用完全自定义的日期格式。

自定义视图和按钮的使用示例（这是使用原生 JS 语法，因为我不是 React 用户，但你可以轻松调整它）：

headerToolbar: {
  start: "todayBtnUC prev,next",
  center: "title",
  end: "dayGridMonthUC,timeGridWeekUC,timeGridDayUC"
},
views: {
  dayGridMonthUC: {
    type:"dayGridMonth",
    buttonText: "MONTH"
  },
  timeGridWeekUC: {
    type:"timeGridWeek",
    buttonText: "WEEK"
  },
  timeGridDayUC: {
    type:"timeGridDay",
    buttonText: "DAY"
  }
},
customButtons:
{
  todayBtnUC: {
    text: "TODAY",
    click: function() {
      calendar.gotoDate(new Date());
    }
  }
},
initialView: "dayGridMonthUC",

现场演示：https://codepen.io/ADyson82/pen/PoroLaa

---

附注顺便说一句：除非您的总体目标是非常特殊的视觉风格，否则在互联网上使用全大写通常被认为相当于大喊大叫（而不是正常说话）。我建议仔细考虑在页面中使用它的位置、时间和原因。