精炼全日历；列表视图序数

Question

正在升级到 fullcalendar v5。很棒的工具！
在列表视图中，我想让左列显示 'Friday 2nd' - 或星期六第 3... 等
我设置了

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

并认为这会颠倒默认顺序：“2 Friday”到 Friday 2（我基本上可以接受 - 但它不会改变顺序。
我做过 hack - 它适用于我的特定（当前）需求，但它仍然是 hack。在 fc-list.min.js 我在 top

声明了一个序数函数

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 挂钩将 header 日的内容设置为自定义值。 https://fullcalendar.io/docs/day-header-render-hooks

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

可以在 FullCalendar 实例中使用以下代码将 header 日的内容设置为“2 号星期五”、“3 号星期六”...

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

我最初的问题是关于设置列表 header 信息。 - 具体来说：

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

我可能 post 这是另一个问题，但想澄清我的结果并与史蒂夫的回答一起工作，添加评论太有限了。史蒂夫向我指出了 dayHeaderContent - 文档说“生成的内容插入到 header 单元格的 inner-most 包装器中。” - 这是正确的，但它只允许一个居中的元素。我希望重现 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
        }
    },

我确实尝试了无数次 return 排列组合，但就我最初的目标而言，我感到走到了死胡同。现在已经足够好了。

欢迎对原始问题进行任何补充。谢谢。

精炼全日历；列表视图序数

Finnesing fullcallendar; list view ordinals

javascript

datetime

fullcalendar

fullcalendar-5