FullCalendar - 列表查看未正确分组的多天事件 [英] FullCalendar - list view multi-day events not grouping correctly
问题描述
我正在尝试设置一个具有月，周，日和列表视图选项的FullCalendar，这可以在几乎evrything中正常工作，您可以在这里看到：
I'm trying to set a FullCalendar with Month, Week, Day and List view options, and this is working fine for almost evrything, as you can see here:
但是，在ListView中，这是一个多天活动的第一个事件在其开始和结束日期之间没有与其他evento进行分组：
But, in the ListView, the first event that's a multi-day event isn't grouping with other evento between it start and end dates:
我试图使用下面的代码我从这个问题的答案中得到： fullCalendar多日活动的开始和结束时间（我没有足够的声誉来回答或评论那里，所以我正在创建这个新的）
I'm trying to use the code below that I get from this issue's answer: fullCalendar multi-day event start and end times (I haven't enough reputation to answer or comment there, so I'm creating this new one)
events.push({
title: "Birmingham Comic Con",
start: new Date('2016-11-20T09:00'),
end: new Date('2016-11-22T19:00'),
id: 1,
isMultipleDay: true,
multipleDayEvents: [
{
start: new Date('2016-11-20T09:00'),
end: new Date('2016-11-20T19:00'),
allDay: false,
description: 'Day 1',
},
{
start: new Date('2016-11-21T09:00'),
end: new Date('2016-11-20T19:00'),
allDay: false,
description: 'Day 2'
},
{
start: new Date('2016-11-22T09:00'),
end: new Date('2016-11-22T19:00'),
allDay: false,
description: 'Day 3'
}
]
});
events.push({
title: "Birmingham Comic Con Outro",
start: new Date('2016-11-20T10:00'),
end: new Date('2016-11-20T19:00'),
id: 2
});
events.push({
title: "Birmingham Comic Con No meio",
start: new Date('2016-11-21T10:00'),
end: new Date('2016-11-21T19:00'),
id: 3
});
这是完整的代码：
$(document).ready(function () {
moment.locale(idioma);
var today = moment(Date()).format("YYYY-MM-DD");
var status = '';
var vencimento = '';
var description = '';
var action = '';
var setColor = '';
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
defaultDate: today,
defaultView: 'month',
listDayFormat: 'dddd',
listDayAltFormat: 'LL',
locale: 'en',
editable: false,
eventLimit: true, // allow "more" link when too many events
events: function (start, end, timezone, callback) {
jQuery.ajax({
url: window.root + "Calendarios/GetEvents",
type: 'POST',
dataType: 'json',
data: {
start: start.format(),
end: end.format(),
agendado: $("#Agendado").is(":checked"),
realizado: $("#Realizado").is(":checked"),
atrasado: $("#Atrasado").is(":checked")
},
success: function (data) {
var events = [];
/*
if (data.Success) {
$.map(data.Treinamentos, function (t) {
if (t.Status == 2) {
setColor = "green";
} else {
if (t.Status == 1 && (moment() > moment(t.DataFinal)))
setColor = "red";
else
setColor = "";
}
t.Participantes.forEach(function (item) {
if (item.Status == 2) {
setColor = "green";
} else {
if (t.Status == 1 && (moment() > moment(t.DataFinal)))
setColor = "red";
else
setColor = "";
}
events.push({
id: item.Id,
title: item.Funcionario.Registration + " - " + item.Funcionario.Name,
start: moment(t.DataInicial).format("YYYY-MM-DDTHH:mm:ss"),
end: moment(t.DataFinal).format("YYYY-MM-DDTHH:mm:ss"),
color: setColor,
description: t.InfoCardNumber + " - " + t.Revision,
url: window.root + "Treinamentos/Index/" + t.Id
});
});
});
}
*/
events.push({
title: "Birmingham Comic Con",
start: new Date('2016-11-20T09:00'),
end: new Date('2016-11-22T19:00'),
id: 1,
isMultipleDay: true,
multipleDayEvents: [
{
start: new Date('2016-11-20T09:00'),
end: new Date('2016-11-20T19:00'),
allDay: false,
description: 'Day 1',
},
{
start: new Date('2016-11-21T09:00'),
end: new Date('2016-11-20T19:00'),
allDay: false,
description: 'Day 2'
},
{
start: new Date('2016-11-22T09:00'),
end: new Date('2016-11-22T19:00'),
allDay: false,
description: 'Day 3'
}
]
});
events.push({
title: "Birmingham Comic Con Outro",
start: new Date('2016-11-20T10:00'),
end: new Date('2016-11-20T19:00'),
id: 2
});
events.push({
title: "Birmingham Comic Con No meio",
start: new Date('2016-11-21T10:00'),
end: new Date('2016-11-21T19:00'),
id: 3
});
callback(events);
}
});
},
eventRender: function (event, element) {
element.popover({
title: event.title,
placement: "auto",
html: true,
trigger: "click",
animation: "true",
content: event.description,
container: "body"
});
},
eventMouseout: function (event, jsEvent, view) {
$(this).popover("hide");
},
eventMouseover: function (event, jsEvent, view) {
$(this).popover("show");
}
});
//Botão Mostrar Filtro
$("#BtShowFilter").html(ShowFilter);
$("#BtShowFilter").on("click", function () {
$("#Filter").slideToggle(function () {
var text = $("#Filter").css("display") === "none" ? ShowFilter : HideFilter;
$("#BtShowFilter").html(text);
});
});
//Botão Filtro
$("#BtFilter").on("click", function () {
$('#calendar').fullCalendar("refetchEvents");
});
});
推荐答案
我实际上是处理同样的问题。我可以通过移动到最新版本的FullCalendar（3.0.1）来解决它。他们在列表视图中修复了此错误，或至少它处理了我的问题。它看起来和你的完全一样。
I was actually dealing with the same issues. I was able to fix it by moving to the latest release of FullCalendar (3.0.1). They have a fix for this bug in list view or at least it took care of my issue. It looks like it is the exact same as yours.
发行说明： https://github.com/fullcalendar/fullcalendar/releases/tag/v3.0.1
希望这也解决了你的问题！
Hope this fixes your problems too!
这篇关于FullCalendar - 列表查看未正确分组的多天事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
