如何使用 fullcalendar V5 hide/show 项目取决于事件的数量？

Question

在 fullcalendarV5 中，我的单元格包含文本："+1 more"/"+2 more" 和看起来像：https://imgur.com/a/pjvXINC 我设置选项：

    var calendar = new FullCalendar.Calendar(calendarEl, {
        height: 900,
        showNonCurrentDates: false,

        displayEventTime: false,
        editable: true,
        allDaySlot: true,
        selectable: true, // can select any cell
        selectOverlap: false,
        fixedWeekCount: false,
        aspectRatio: 0.4,
        ...

如果有办法显示文本（带有隐藏项）“+1 more”说如果我一天有 5 个或更多事件如果 4 个或更少显示所有项目？

更新#1： 我发现属性

   dayMaxEvents: false, // allow "more" link when too many events

如果更改此值对我有用

但是其他相关属性dayMaxEventRows（我在这里找到https://fullcalendar.io/docs/dayMaxEventRows）对我不起作用：我总是“更多” link 。我的日历定义：

var calendar = new FullCalendar.Calendar(calendarEl, {
    height: 900,
    showNonCurrentDates: false,

    displayEventTime: false,
    editable: true,
    allDaySlot: true,
    selectable: true, // can select any cell
    selectOverlap: false,
    fixedWeekCount: false,
    aspectRatio: 0.4,


    customButtons: {
        myCustomButton: {
            text: 'Filter', click: function () {
                window.axios.get('/admin/get_search_info', {}).then((response) => {
                    ...
                }).catch((error) => {
                    console.error(error)
                    popupAlert('Calendar', 'Run time error : ' + getErrorMessage(error), 'error')
                })
            }
        }
    },
    headerToolbar: {
        left: 'prevYear,prev,next,nextYear today, myCustomButton',
        center: 'title',
        right: 'listYear,dayGridMonth,dayGridWeek,dayGridDay, timeGridDay', // timeGridWeek,timeGridDay
    },
    dayHeaders : true, // ? Whether the day headers should appear. For the Month, TimeGrid, and DayGrid views.
    dayHeaderFormat : { weekday: 'short' },
    initialDate: '{{ $select_year ?? 0}}-{{ str_pad($select_month+1, 2, "0", STR_PAD_LEFT) ?? 0}}-01',
    navLinks: true, // can click day/week names to navigate views
    dayMaxEventRows: true,
    dayMaxEvents: true, // allow "more" link when too many events
    views: {
        timeGrid: {
            dayMaxEventRows: 2,
        },
        dayGridMonth: {
            editable: false,
            dayMaxEventRows: 2,
        }
    },

    events: function (info, successCallback, failureCallback) {    //get data from db for selected dates
       ...

dayMaxEventRows 定义无效或与其他属性冲突？

提前致谢！

Answer 1

您将 dayMaxEvents 和 dayMaxEventRows 定义为全局选项似乎覆盖了相同选项的视图特定定义。所以它到处都使用全局选项。

如果您将全局选项注释掉而只保留特定于视图的选项，那么它将执行这些规则：

views: {
    timeGrid: {
        dayMaxEventRows: 2,
    },
    dayGridMonth: {
        editable: false,
        dayMaxEventRows: 2,
    }
},

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

如何使用 fullcalendar V5 hide/show 项目取决于事件的数量？

How with fullcalendarV5 hide/show items depending on number of events?

javascript

fullcalendar

fullcalendar-5