完整日历：在一个单元格中限制每天的事件

Question

有没有一种方法可以限制 bootstrap 日历中每个单元格的事件，如附图所示？我想将其显示为 2 个事件和“... X 更多”标签，以防超过 2 个事件具有相同的日期并防止拉伸整个日历。

Answer 1

尝试以下方法。

在 17 天前发布的新版本 v2.1.0-beta2 中，Arshaw 做了以下事情

RESOLVED ISSUES:

Max events with "more..." link (304) Don't fire eventMouseover/eventMouseout while dragging/resizing (1297) NEW OPTIONS:

eventLimit event LimitClick eventLimitText dayPopoverFormat

来源

因此，您可以执行以下操作：

$('#calendar').fullCalendar({
    lang: 'en',
    eventLimit: true, // If you set a number it will hide the itens
    eventLimitText: "Something" // Default is `more` (or "more" in the lang you pick in the option)
});

取自：Fullcalendar, required files for limit number events per day with view more/ more button?

Answer 2

如果是月视图，配置应该是这样的：

 eventLimit: true,
  views: {
     month: {
       eventLimit: 3
     }
 }

此外，如果有多个事件，添加滚动条可能会有帮助：

.fc-more-popover {
    overflow-y: scroll;
    max-height: 20%;
    max-width: 14%;
}

Answer 3

设为

eventLimitText: function (numEvents) {
                        return "YourCustomText";
                    },

Answer 4

我创建了一个代码，这样它就不会在一天的单元格中允许超过 3 个事件。

drop: function(t, a) {
                var n = e(this).data("eventObject"),
                    r = e.extend({}, n);
                    var date = new Date(t._d);
                    var year = date.getFullYear();
                    var rawMonth = parseInt(date.getMonth()) + 1;
                    var month = rawMonth < 10 ? '0' + rawMonth : rawMonth;
                    var rawDay = parseInt(date.getDate()) + 1;
                    var day = rawDay < 10 ? '0' + rawDay : rawDay; 
                    var dropdate = year+'-'+month+'-'+day;

                var eventId = '';
                var totalEvents = e('#calendar').fullCalendar( 'clientEvents', function(eventObj){
                    eventId = eventObj._id;
                    var date = new Date(eventObj.start._d);
                    var year = date.getFullYear();
                    var rawMonth = parseInt(date.getMonth()) + 1;
                    var month = rawMonth < 10 ? '0' + rawMonth : rawMonth;
                    var rawDay = parseInt(date.getDate()) + 1;
                    var day = rawDay < 10 ? '0' + rawDay : rawDay; 
                    var newdate = year+'-'+month+'-'+day;

                    if (dropdate == newdate) {
                        return true;
                    } else {
                        return false;
                    }
                }).length;

                if( totalEvents > 3 ){
                    e('#calendar').fullCalendar('removeEvents', eventId);
                }

            },

Answer 5

根据文档：https://fullcalendar.io/docs/eventLimit、

您可以使用以下代码并根据您的目标进行升级：

var calendar = new Calendar(calendarEl, {
  eventLimit: true, // for all non-TimeGrid views
    views: {
      timeGrid: {
      eventLimit: 6 // adjust to 6 only for timeGridWeek/timeGridDay
    }
  }
});

在这种情况下，日历中将只显示几个元素，但在每一天的底部将是一个 link +x more，其中 x 代表总数您当天的记录会弹出一个模式 window 以及其余信息。

希望对您有所帮助！

编辑：

显然 eventLimit: true 足以实现默认功能。

Answer 6

在 v5.0.0-beta.2 中，eventLimit 选项似乎不起作用，但 dayMaxEvents 选项起作用。

来源：https://github.com/fullcalendar/fullcalendar/blob/d3a2b13db43cfe9a450091776da3be25a0ca15c0/packages/daygrid/src/TableRow.tsx#L40

示例：

var calendar = new Calendar(calendarEl, {
  dayMaxEvents: 3 // Can also be set as a boolean
});

Answer 7

对于使用 FullCalendar v5 并希望在月视图中限制事件的任何人，请添加以下选项 -

views: {
    dayGridMonth: {
        dayMaxEventRows: 3
    }
}

完整日历：在一个单元格中限制每天的事件

Full Calendar: Limit events per day in one cell

javascript

jquery

twitter-bootstrap-3