Fullcalendar:如果添加了一些 html 并且呈现了太多事件,则 agendaWeek 视图中的列将被销毁
Fullcalendar : columns are destroyed in agendaWeek view if some html is added and too many events are rendered
我在 Salesforce 的 Visualforce 页面上使用全日历。
我想在 agendaDay
、agendaWeek
和 Month views
的每一天添加一个小按钮 +
(在列的顶部,在 All day
行)。
它在 Month
和 agendaDay
视图上工作正常。但是当谈到 agendaWeek
视图时,只有在全天线中有几个事件时它才能正常工作。如果有足够的事件触发 +3 more
或 +X more
,事件和 +
按钮将被拆分,并且整个 table 被破坏,因为它使列数加倍(7仅包含事件的列,以及仅包含按钮的 7 列)。
当这个“+X more”出现时,table 的 CSS 似乎发生了变化,但我不知道如何检测它并调整我的代码。
这 JSFiddle 显示了问题所在。 (在议程视图中查看全天活动)。
看来是FC的bug(或者不支持)
FullCalendar 使用奇怪的 table 结构呈现 allDay
事件。您可以使用浏览器的开发工具查看它。
它所做的其中一件事是创建 allDay
事件 table (.fc-day-grid .fc-content-skeleton table
) 的第一行,每列上有 rowspan=maxNumOfEventsDuringWeek
。问题是它使用的是实际事件数,而不是 visible 事件数。
因此,如果您有 3 个事件,它会设置 rowspan=3
,这是有效的。但是,如果您有 10 个事件,它会设置 rowspan=10
,即使当 eventLimit
打开时只有 4 个是可见的。
这通常不会导致问题,但是当您向 table 添加另一行时,上面的行将其推到一边,"broke it".
可能的修复
如果您真的执着于当前的代码,可以将一些代码添加到 "fix" 和 rowspan
。我不推荐这个,因为它太 hacky 并且不会是 stable.
但基本上,您会:
- 计算可见事件的数量
- 更改第一行每一列的
rowspan
属性
更好的选择
我们只添加一个绝对定位的 link,而不是向 table 添加一行。这是 eventAfterRender
函数(我也将其缩短):
eventAfterAllRender: function (view) {
var addPlusToDay = function (dayOfWeek) { // Adds a button to a day number (1 through 7)
var day = moment(view.start).add(dayOfWeek, 'd');
var plus = j$('<a href="/path/file.jsp?date=' + day.format('L') +
'" target="_parent" class="addLink"' +
' style="display: block; position:absolute; bottom:0px;">'+
'<img src="/image/s.png" alt="Ajouter un événement - ' + day.format('L') +
'" class="addNewEventIcon" title="Ajouter un événement - ' + day.format('L') +
'" style="margin-right:0px;"></a>');
plus.appendTo(j$('#calendar .fc-day-grid .fc-content-skeleton tbody tr:first td:not(.fc-axis)').get(dayOfWeek));
}
if (view.name == 'agendaWeek') {
var days = [0, 1, 2, 3, 4, 5, 6, 7];
$.each(days, addPlusToDay);
}
if (view.name == 'agendaDay') {
addPlusToDay(0);
var dateParam = view.start;
generateActivitiesTable(dateParam, 'dayView');*/
}
}
这里是 demo。
还要注意演示中的 CSS,它修复了一些格式问题。
我在 Salesforce 的 Visualforce 页面上使用全日历。
我想在 agendaDay
、agendaWeek
和 Month views
的每一天添加一个小按钮 +
(在列的顶部,在 All day
行)。
它在 Month
和 agendaDay
视图上工作正常。但是当谈到 agendaWeek
视图时,只有在全天线中有几个事件时它才能正常工作。如果有足够的事件触发 +3 more
或 +X more
,事件和 +
按钮将被拆分,并且整个 table 被破坏,因为它使列数加倍(7仅包含事件的列,以及仅包含按钮的 7 列)。
当这个“+X more”出现时,table 的 CSS 似乎发生了变化,但我不知道如何检测它并调整我的代码。
这 JSFiddle 显示了问题所在。 (在议程视图中查看全天活动)。
看来是FC的bug(或者不支持)
FullCalendar 使用奇怪的 table 结构呈现 allDay
事件。您可以使用浏览器的开发工具查看它。
它所做的其中一件事是创建 allDay
事件 table (.fc-day-grid .fc-content-skeleton table
) 的第一行,每列上有 rowspan=maxNumOfEventsDuringWeek
。问题是它使用的是实际事件数,而不是 visible 事件数。
因此,如果您有 3 个事件,它会设置 rowspan=3
,这是有效的。但是,如果您有 10 个事件,它会设置 rowspan=10
,即使当 eventLimit
打开时只有 4 个是可见的。
这通常不会导致问题,但是当您向 table 添加另一行时,上面的行将其推到一边,"broke it".
可能的修复
如果您真的执着于当前的代码,可以将一些代码添加到 "fix" 和 rowspan
。我不推荐这个,因为它太 hacky 并且不会是 stable.
但基本上,您会:
- 计算可见事件的数量
- 更改第一行每一列的
rowspan
属性
更好的选择
我们只添加一个绝对定位的 link,而不是向 table 添加一行。这是 eventAfterRender
函数(我也将其缩短):
eventAfterAllRender: function (view) {
var addPlusToDay = function (dayOfWeek) { // Adds a button to a day number (1 through 7)
var day = moment(view.start).add(dayOfWeek, 'd');
var plus = j$('<a href="/path/file.jsp?date=' + day.format('L') +
'" target="_parent" class="addLink"' +
' style="display: block; position:absolute; bottom:0px;">'+
'<img src="/image/s.png" alt="Ajouter un événement - ' + day.format('L') +
'" class="addNewEventIcon" title="Ajouter un événement - ' + day.format('L') +
'" style="margin-right:0px;"></a>');
plus.appendTo(j$('#calendar .fc-day-grid .fc-content-skeleton tbody tr:first td:not(.fc-axis)').get(dayOfWeek));
}
if (view.name == 'agendaWeek') {
var days = [0, 1, 2, 3, 4, 5, 6, 7];
$.each(days, addPlusToDay);
}
if (view.name == 'agendaDay') {
addPlusToDay(0);
var dateParam = view.start;
generateActivitiesTable(dateParam, 'dayView');*/
}
}
这里是 demo。
还要注意演示中的 CSS,它修复了一些格式问题。