Fullcalendar.io：如何在agendaWeek中的每行显示一个事件，然后将所有内容混合在一起？ [英] Fullcalendar.io: how to display one event per line in agendaWeek then mix all in one?
问题描述
我使用Fullcalendar.io v2
在我的 agendaWeek mod中，我有事件，并且显示所有事件在天广场的一条线上。所以，我有更多的事件，然后事件块。
如何显示每行一个事件？就像 month mod一样。和更多的事件我有，然后更高的日子块将我（身高）。也许，很难使用像 eventRender 这样的函数，因为如果你检查 .fs-event 元素（web开发者工具），你会看到事件块使用 position：absolute; top：300px; left：33％ ...所以我不知道该怎么做。
我想要这样的东西：
我也被这个问题困住了，这很困难，因为插件组成以奇怪的方式使用日历，使用一些表格并使用位置绝对动态定位事件并改变css top 属性。
然而，我发现了一个非常好的通用解决方案。首先我会告诉你代码，他们会解释代码的功能。
我使用
我使用时刻来管理时间，我假设fullCalendar html元素为'日历'。
eventAfterAllRender：function（）{
//定义静态值，使用这个值来改变事件项的高度
var defaultItemHeight = 25;
var defaultEventItemHeight = 18;
// ...
//找到所有行并定义一个函数来选择具有特定时间的行
var rows = [];
$（'div.fc-slats> table> tbody> tr [data-time]'）。each（function（）{
rows.push（$（this））;
}）;
var rowIndex = 0; （rowIndex< rows.length&&&moment; rows [rowIndex] .attr（'data-time'），['HH：mm：
var getRowElement = function（time）{
while ss']）<= time）{
rowIndex ++;
}
var selectedIndex = rowIndex - 1;
返回selectedIndex> = 0？ rows [selectedIndex]：null;
};
//重新排序事件项目位置并在需要时增加行高度
$（'div.fc-content-col> div.fc-event-container'）。each（function （）{// for-each week column
var accumulator = 0;
var previousRowElement = null;
$ b $（this）.find（'> a.fc-每一个（函数（）{/ /为每个星期列上的事件
//选择当前时间格点event.fc -v-event.fc-event.fc-start.fc-end'事件时间及其行
var currentEventTime = moment（$（this）.find（'> div.fc-content> div.fc-time'）。attr（'data-full'），[' h：mm A']）;
var currentEventRowElement = getRowElement（currentEventTime）;
//当前行必须有多个项目
if（currentEventRowElement === previousRowElement ）{
累加器++;
//向下移动事件（使用margin-top prop，它必须是属性才能避免与FullCalendar行为发生冲突）
$（this）.css（'margin-top'，'+ ='+（accumulator * defaultItemHeight）.toString（）+'px'）;
//增加当前行的高度如果它克服了它当前的最大项目
var maxItemsOnRow = currentEventRowElement.attr（'data-max-items'）|| 1;
if（accumulator> = maxItemsOnRow）{
currentEventRowElement.attr（'data-max-items'，accumulator + 1）;
currentEventRowElement.css（'height'，'+ ='+ defaultItemHeight.toString（）+'px'）;
}
} else {
//重置计数
rowIndex = 0;
accumulator = 0;
}
//为事件项目和更新设置默认样式previosRow
$（this）.css（'left'，'0'）;
$（this）.css（'right'，'7px'）;
$（this）.css（'height'，defaultEventItemHeight.toString（）+'px'）;
$（this）.css（'margin-right'，'0'）;
previousRowElement = currentEventRowElement;
}）;
}）;
//用于重新绘制日历
$（'＃calendar'）。fullCalendar（'option'，'aspectRatio'，$（'＃calendar'）。fullCalendar （'option'，'aspectRatio'））;
}
代码如何工作：
首先，我发现了所有属于我日历行的元素（注意它们包含一个拥有时间的属性）。
后来我迭代每列，并获取其中的每个事件项。每个事件项目都是一个 anchor 元素，其中一些内部子元素将日期作为属性 data-full 。
从事件中，我看看它的行应该是什么，如果有多个项目，在那一行中，然后增加事件项目应该位于的位置。我使用 margin-top 属性，因为该属性未被插件使用或重新调整（不要使用 top 属性）。
在这一行中，我设置了一个数据属性，以获取具有该行任何列的事件的最大数量。有了这个，我可以计算出该行是否必须增加它的高度。
嗯，这基本上就是代码所做的。如果你有一些问题，请做 - 它。
I use Fullcalendar.io v2
In my agendaWeek mod I have events and all of them are displayed on one line in day square. So, more events I have, then thiner event blocks.
How can I show one event per line? Like in month mod. And more events I have, then higher day block will me (height). Perhaps, it is hard to use functions like eventRender, because if you inspect .fs-event element (web developer tool), you will see event block uses position:absolute;top:300px;left:33%... so I don't know what to do.
I want something like this:
I was stuck with that problem too, it is very difficult because the plugin compose the calendar in an odd way, using some tables and locating the events with dynamically with a position absolute and varying the css top property.
However i found a generic solution that works very good. First i will show you the code, and them i will explain what exactly the code does.
I use the option
I use moment for manage time and i assume the id of the fullCalendar html element is 'Calendar'.
eventAfterAllRender: function() {
// define static values, use this values to vary the event item height
var defaultItemHeight = 25;
var defaultEventItemHeight = 18;
// ...
// find all rows and define a function to select one row with an specific time
var rows = [];
$('div.fc-slats > table > tbody > tr[data-time]').each(function() {
rows.push($(this));
});
var rowIndex = 0;
var getRowElement = function(time) {
while (rowIndex < rows.length && moment(rows[rowIndex].attr('data-time'), ['HH:mm:ss']) <= time) {
rowIndex++;
}
var selectedIndex = rowIndex - 1;
return selectedIndex >= 0 ? rows[selectedIndex] : null;
};
// reorder events items position and increment row height when is necessary
$('div.fc-content-col > div.fc-event-container').each(function() { // for-each week column
var accumulator = 0;
var previousRowElement = null;
$(this).find('> a.fc-time-grid-event.fc-v-event.fc-event.fc-start.fc-end').each(function() { // for-each event on week column
// select the current event time and its row
var currentEventTime = moment($(this).find('> div.fc-content > div.fc-time').attr('data-full'), ['h:mm A']);
var currentEventRowElement = getRowElement(currentEventTime);
// the current row has to more than one item
if (currentEventRowElement === previousRowElement) {
accumulator++;
// move down the event (with margin-top prop. IT HAS TO BE THAT PROPERTY TO AVOID CONFLICTS WITH FullCalendar BEHAVIOR)
$(this).css('margin-top', '+=' + (accumulator * defaultItemHeight).toString() + 'px');
// increse the heigth of current row if it overcome its current max-items
var maxItemsOnRow = currentEventRowElement.attr('data-max-items') || 1;
if (accumulator >= maxItemsOnRow) {
currentEventRowElement.attr('data-max-items', accumulator + 1);
currentEventRowElement.css('height', '+=' + defaultItemHeight.toString() + 'px');
}
} else {
// reset count
rowIndex = 0;
accumulator = 0;
}
// set default styles for event item and update previosRow
$(this).css('left', '0');
$(this).css('right', '7px');
$(this).css('height', defaultEventItemHeight.toString() + 'px');
$(this).css('margin-right', '0');
previousRowElement = currentEventRowElement;
});
});
// this is used for re-paint the calendar
$('#calendar').fullCalendar('option', 'aspectRatio', $('#calendar').fullCalendar('option', 'aspectRatio'));
}
How the code works:
First i found all tr elements that are the rows of my calendar (note that they contains an attribute with its owns time).
Later I iterate for each column and get, for each one, its events items. Each event item is an anchor element with some inner child with the date as an attribute data-full.
From the event i peek what should be its row, and in that row if there are more than one item, then increase the position where the event item should be located. I use for that the margin-top property because this property is not used or readjust by the plugin (don't use top property).
In the row i set a data attribute to take the max amount of events that has any column of that row. With that, i can calculate if the row must be increase its height or not.
Well, this is basically what the codes does. If you have some question please do-it.
这篇关于Fullcalendar.io：如何在agendaWeek中的每行显示一个事件，然后将所有内容混合在一起？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
