fining fullcallcalendar;列表视图序数

Question

升级到fullcalendar v5。很棒的工具!
在列表视图中，我想让左栏显示'Friday 2nd' -或saturday 3rd…等
我已经设置

listDayFormat: { weekday: 'long', day: 'numeric' }, 

，并认为这会颠倒默认的顺序:"2 Friday"改到周五2号(我基本上可以忍受——但这并没有改变顺序。
我有一个黑客工作——为我的具体工作,(当前)的需求,但它仍然是一个黑客。在fc-list.min.js中，我在顶部声明了一个序数函数

function swap(thus) {
x = thus.split(' ')[0]; // day number
y = thus.split(' ')[1]; // day name
var s=["th","st","nd","rd"], v=x%100;
return y+' '+x+(s[(v-20)%10]||s[v]||s[0]);
}

然后在min.js中调用这个函数。

<td class="'+(r.getClass("tableListHeading")||r.getClass("widgetHeader"))+'" colspan="3">'
+(i?t.buildGotoAnchorHtml(o,s,e,{class:"fc-list-heading-main"},
//t.htmlEscape(s.format(e,i)) // original  
swap(s.format(e,i)) // function swap() set at page top  
):"")
+(a?t.buildGotoAnchorHtml(o,s,e,{class:"fc-list-heading-alt"},t.htmlEscape(s.format(e,a))):"")+"</td>")},

我有一个修复-但不是一个解决方案。有谁能指引我走一条更直的路吗?谢谢你。

Answer 1

dayHeaderContent钩子将日标头的内容设置为自定义值。https://fullcalendar.io/docs/day-header-render-hooks

示例:https://codepen.io/stevewillson/pen/jOwgGqm

下面的代码可以在FullCalendar实例中使用，将日标头内容设置为"Friday 2nd"， "Saturday 3rd"…

dayHeaderContent: function(info) {
let s = '';
// get the day of the month (number)
const dayOfMonth = info.date.getDate();
// set the ordinal value of the date in s
if (dayOfMonth > 3 && dayOfMonth < 21) s = 'th';
switch (dayOfMonth % 10) {
case 1:  s = 'st'; break;
case 2:  s = 'nd'; break;
case 3:  s = 'rd'; break;
default: s = 'th';   
}
const locale = 'en-US';
// get the name of the day (Friday, Saturday ...)
const dayName = info.date.toLocaleDateString(locale, { weekday: 'long' });
return dayName + ' ' + dayOfMonth + s;
},

Answer 2

我最初的问题是关于设置头信息列表。——尤其是:

listDayFormat: { weekday: 'long', day: 'numeric' },
listDayAltFormat: { year:'numeric', month: 'short', day: 'numeric' },

我可能会把这个作为另一个问题发布，但我想澄清我的结果，并与史蒂夫的回答一起工作，添加评论太有限了。Steve向我指出了dayHeaderContent——文档中说"生成的内容插入到header单元格最内部的包装器中"。-这是正确的，但它只允许单个居中元素。我希望复制listDayFormat的左样式和listDayAltFormat的右样式。我能想到的唯一方法就是添加html。但这是不允许的。我尝试了各种各样的>>eventContent: {html: 'some html'} <<但是没有进展。
这是我工作的史蒂夫的答案…

dayHeaderContent: function(info) {
if (info.view.type == 'listMonth') {
x = info.date.getDate(); // #dayOfMonth
var s=["th","st","nd","rd"], v=x%100; // ordinal
var ordinal = x+(s[(v-20)%10]||s[v]||s[0]);
// thought this would help with left/right setup
// just a bit of fun
var dayNames = ["Sun Day","Moon Day","Tiw's Day","Woden's Day","Thor's Day","Frige's Day","Saturn Day",];
return dayNames[info.date.getDay()]+' '+ordinal; // getDay()=#dayOfWeek
}
},

和我确实尝试了许多返回排列，但感觉在死胡同关于我最初的目标。现在已经足够好了。

对原q的任何补充都是非常受欢迎的。谢谢你。