In FullCalendar there are events that can continue over the night, so you will have events that are in a new day, but FullCalendar makes it so that the content of the event in the first day is repeated in every other day that the event is on. What I’d like to achieve is that the content of the event starts on the first day and is hid.
I have used eventContent
with success for a static FullCalendar, I made a class out of every event ID and assigned it to the event using eventClassNames
and then I used eventContent
to fetch all classes using the event ID and if the length of that array was 0, then I returned the event content. If the class count was not 0 but the event content was not found within the classes then it would also return the event content.
eventClassNames
function (arg) {
return ['event-' + arg.event.id];
}
eventContent
function (arg) {
var d1 = document.getElementsByClassName('event-' + arg.event.id);
if (d1.length == 0) {
return {html: arg.event.title + '' + arg.event.extendedProps.html};
}
console.log(d1);
for (var i = 0; i < d1.length; i++) {
if (d1[i].innerText.includes(arg.event.title)) {
return false;
}
}
}
However the problem arises when you try to edit the event using editable
, the above code works for static FullCalendar because when the first part of the event is loaded nothing with the class name will yet have been loaded so d1.length
will be 0, when you start using editable all parts of the events will already have been loaded and the parts of a event when called can be 1, 2, 3 or more of the exact same event (not parts of the event, just a complete version of the event’s el), to solve this I tried to check whether the event content was already on the screen by looping through all relevant classes however that results in the event seeing itself as shown and ends up showing nothing, or showing the event content on the wrong part of the event.
before moving a event
after moving a event
I’ve also tried splitting events which worked but, it also meant that when I tried to move the events using editable
the events would be 2 separate events, maybe there is a way to make them act as one, I tried looking into this but nothing of relevance showed up…