时间戳

首页 > 解决方案 > （Fullcalendar 4 VueJs）columnHeaderHtml - 如何显示（dayName，dayNumber），如（Mon，8），（Tue，9）等

javascript - （Fullcalendar 4 VueJs）columnHeaderHtml - 如何显示（dayName，dayNumber），如（Mon，8），（Tue，9）等

问题描述

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

为了显示 dayName 我使用这个：

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

请给点建议，先谢谢了。

标签： javascriptdatefullcalendarfullcalendar-4

解决方案

如果你使用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

推荐阅读