00:00 附近的事件被切断(可见)
Event getting cut ( visible ) near 00:00
我正在使用 FullCalendar v.3.4.0,没有 CSS 更改。
我只有基本 css 和声明的打印版本。
正如您在图片上看到的那样,在接近午夜时分开始的最后一个活动在视觉上被剪掉了。
在 Fullcalendar 的 Github 中,有一个关于 Chrome 对 table 的渲染的棘手问题,但我不确定问题是否出在那里。
我还没有尝试过 Firefox,但我 运行 在 Android 上的 Cordova 应用程序的 Web 视图中,所以我必须 Chrome。
example of the issue
初始化代码
$('#events').fullCalendar({
defaultView: 'agendaDay',
allDaySlot: false,
editable: false,
eventLimit: true,
displayEventTime: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
events: "remote.php"
}
我可以添加一个“幽灵”事件,以便它推送溢出的视图以查看该事件吗?我想避免使用 jquery 进入 DOM,但如果没有其他更改,我会这样做。
提前谢谢你。
此致
我已经通过以下步骤解决了:
后端
添加了一个名为“时间”的字段(或您希望使用的任何字段),每当您检测到结束日期进入第二天时,您将“时间”设置为“23-59”。
前端
将以下代码添加到您的 Fullcalendar init 中:
eventRender: function(eventObj, $el) {
if (eventObj.time == "23-59") {
$($el).css({"overflow":"inherit","height":"50px"});
}
},
eventAfterAllRender : function (view) {
if (view.type == 'agendaDay') {
$(".fc-agendaDay-view .fc-slats table tbody").append('<tr>\
<td class="fc-axis fc-time fc-widget-content" style="height:100px"></td>\
<td class="fc-widget-content"> </td>\
</tr>');
}
}
这不是 v3 的优雅解决方案,但它符合我的要求。
我正在使用 FullCalendar v.3.4.0,没有 CSS 更改。
我只有基本 css 和声明的打印版本。
正如您在图片上看到的那样,在接近午夜时分开始的最后一个活动在视觉上被剪掉了。
在 Fullcalendar 的 Github 中,有一个关于 Chrome 对 table 的渲染的棘手问题,但我不确定问题是否出在那里。
我还没有尝试过 Firefox,但我 运行 在 Android 上的 Cordova 应用程序的 Web 视图中,所以我必须 Chrome。
example of the issue
初始化代码
$('#events').fullCalendar({
defaultView: 'agendaDay',
allDaySlot: false,
editable: false,
eventLimit: true,
displayEventTime: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
events: "remote.php"
}
我可以添加一个“幽灵”事件,以便它推送溢出的视图以查看该事件吗?我想避免使用 jquery 进入 DOM,但如果没有其他更改,我会这样做。
提前谢谢你。
此致
我已经通过以下步骤解决了:
后端
添加了一个名为“时间”的字段(或您希望使用的任何字段),每当您检测到结束日期进入第二天时,您将“时间”设置为“23-59”。
前端
将以下代码添加到您的 Fullcalendar init 中:
eventRender: function(eventObj, $el) {
if (eventObj.time == "23-59") {
$($el).css({"overflow":"inherit","height":"50px"});
}
},
eventAfterAllRender : function (view) {
if (view.type == 'agendaDay') {
$(".fc-agendaDay-view .fc-slats table tbody").append('<tr>\
<td class="fc-axis fc-time fc-widget-content" style="height:100px"></td>\
<td class="fc-widget-content"> </td>\
</tr>');
}
}
这不是 v3 的优雅解决方案,但它符合我的要求。