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:
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:
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
});This is the full code:
$(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");
});
});
