javascript 完整日历：在一个单元格中限制每天的事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28732674/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full Calendar: Limit events per day in one cell
提问by user2988257
Is there a way to limit events per one cell on the bootstrap calendar as appears in attached image? I want to show it as 2 events and "... X more" label in case there's more than 2 events with the same date and prevent stretching the whole calendar.
有没有办法限制引导日历上每个单元格的事件，如附图所示？我想将其显示为 2 个事件和“...更多”标签，以防有 2 个以上的事件具有相同的日期并防止拉伸整个日历。
回答by user2988257
Try the following.
请尝试以下操作。
With the new build v2.1.0-beta2 Launch 17 days ago Arshaw did the following
随着新版本 v2.1.0-beta2 发布 17 天前 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
已解决的问题：
带有“更多...”链接的最大事件数 (304) 拖动/调整大小时不要触发 eventMouseover/eventMouseout (1297) 新选项：
eventLimit 事件 LimitClick eventLimitText dayPopoverFormat
Source
来源
So, you can do the following:
因此，您可以执行以下操作：
$('#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)
});
tooked from: Fullcalendar, required files for limit number events per day with view more/ more button?
回答by Bitclaw
If it's the month view, the configuration should be something like this:
如果是月视图，配置应该是这样的：
eventLimit: true,
views: {
month: {
eventLimit: 3
}
}
Also if there are several events, adding a scroll bar could be helpful:
此外，如果有多个事件，添加滚动条可能会有所帮助：
.fc-more-popover {
overflow-y: scroll;
max-height: 20%;
max-width: 14%;
}
回答by Hristislav
According to the documentation: https://fullcalendar.io/docs/eventLimit,
根据文档：https: //fullcalendar.io/docs/eventLimit，
You can use the following code and upgrade it, depending on your goal:
您可以使用以下代码并升级它，具体取决于您的目标：
var calendar = new Calendar(calendarEl, {
eventLimit: true, // for all non-TimeGrid views
views: {
timeGrid: {
eventLimit: 6 // adjust to 6 only for timeGridWeek/timeGridDay
}
}
});
In this case in the calendar will be shown only a few elements but at the bottom of each day will be a link +x more, with xrepresenting the total number of your records for the current day which pops up a modal window with the rest of the information.
在这种情况下，日历中将仅显示几个元素，但在每一天的底部将是一个链接+x more，x代表当天的记录总数，该链接会弹出一个带有其余信息的模式窗口。
I hope I was helpful!
我希望我有帮助！
Edit:
编辑：
Apparently eventLimit: truewas enough for default functionality.
显然eventLimit: true对于默认功能来说已经足够了。
回答by oconn
In v5.0.0-beta.2 the eventLimitoption did not seem to work but the dayMaxEventsoption did.
在 v5.0.0-beta.2 中，该eventLimit选项似乎不起作用，但该dayMaxEvents选项起作用了。
来源：https: //github.com/fullcalendar/fullcalendar/blob/d3a2b13db43cfe9a450091776da3be25a0ca15c0/packages/daygrid/src/TableRow.tsx#L40
Example:
例子：
var calendar = new Calendar(calendarEl, {
dayMaxEvents: 3 // Can also be set as a boolean
});
回答by rohan koshti
Set it as
将其设置为
eventLimitText: function (numEvents) {
return "YourCustomText";
},
回答by user2991736
I created a code so that it will not allow more that 3 event in day cell.
我创建了一个代码，以便它不会在日单元格中允许超过 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);
}
},
