(Fullcalendar 4 VueJs) columnHeaderHtml - 如何显示 (dayName, dayNumber) 像 (Mon, 8), (Tue, 9) 等

Question

在周模式的 header 列中，我需要显示 (dayName, dayNumber) 格式。为此，我使用 "columnHeaderHtml" 方法，但我不知道 如何获得正确的 dayNumber。

为了显示 dayName，我使用了这个：

columnHeaderHtml(date){
   return `<span>
             ${date.toLocaleDateString('default', { weekday: 'short' })} 
          </span>`;
   }

请多多指教， 提前致谢。

Answer 1

如果您改用 columnHeaderFormat 选项，您可以很容易地完成类似的操作：

columnHeaderFormat: { weekday: 'short', day: 'numeric' }

演示：https://codepen.io/ADyson82/pen/abbejWK

---

或者，如果您需要更多的灵活性，那么您可以继续使用 columnHeaderHtml 选项，只需将日期附加到字符串上，如下所示：

columnHeaderHtml(date) {
      return `<span>
             ${date.toLocaleDateString("default", { weekday: "short" })}, ${date.getDate()}
          </span>`;
}

演示：https://codepen.io/ADyson82/pen/QWWeBPq