starting with as you mentioned eventDidMount() and inset-inline-start, gave me an head-start or an idea as to where to start off, so using inspect found that each element of was positioned absolute and with css inline inset values automatically by the fullCalendar library, played around a little with classes and the inset values,
after doing all these i was sure that i need to change the inset values, which was already told by ADyson, but for having an clear picture i still checked it out once,
FAILED SOLUTION 1
now it was straight-forward like just overwrite the css inset left to 25% and right to 0 and rest to default set by the lib, the problem was all the elements were aligned in a single column overlapping each other, maybe even this is what you have tried and mentioned, which i realised it later, anyways
inset: unset 25% unset 0 !important;
FAILED SOLUTION 2
so to tackle the issue, the option left was using js, used the setProperty() to overwrite the left and right values, according to a condition, basically if the pre-set value by the lib was
- more than 25% and less than 50% then change the value to 25%
- more than 50% and less than 75% to 50%
- and more than 75% to 75%,
it worked like a charm , but later when tried it on different real-world cases, i found out that it only worked for at least 3 events, which were in the same row, this failed miserably with 2 events, even after cracking around about it for a while, i felt thinking of another solution would be better as, literally everything was same, there was no way to distinguish between row with 3 and row with 2 events, so even this solution was scarped
FAILED SOLUTION 3
similar to the solution 2 we use javascript, and instead of using simple if-else based upon the pre-set left value, i used different data structures like array and dictionary, the idea was to add the start and end time values to the data structure, but before adding , i checked whether there is a an overlapping of the current event with the previously added events, if present then increase the left with 25%, it was the perfect solution for two events, but when the third event was introduced, it wasnt being positioned as expected,
tried different method on how the overlapping was checked, but still no progress, so had to again discard this method
SUCCESSFUL SOLUTION 4
using the dictionary data-structure, simply put i divide the whole width of the table into 4 parts with 25% for each part, as it was mentioned that the maximum events is 4 and the width is maximum of 25%,
so after dividing the page into 4 parts, kept adding events to each part based upon the overlapping status for that single part instead of all the events ( method used in solution 3 ),if not overlapping then add that event to that part, as simple as that
var dicte= new Map(); // dictionary to store the events of each part
eventDidMount: function(info) {
// this function is called when everytime a new evented is added to the table
var e = info.el.parentNode; // accessing the container class for current event, basically where the inset was added
var sT = info.event.start; // to access the start time of the current event
var eT = info.event.end; // to access the end time of the current event
var startTime = new Date(sT).toTimeString().split(' ')[0]; // extract the start time in hh:mm:ss format
var endTime = new Date(eT).toTimeString().split(' ')[0]; // extract the end time in hh:mm:ss format
startTime = parseInt(startTime.split(":")[0].trim())*3600 + parseInt(startTime.split(":")[1].trim())*60 + parseInt(startTime.split(":")[2].trim()) // converting the start time to total seconds
endTime = parseInt(endTime.split(":")[0].trim())*3600 + parseInt(endTime.split(":")[1].trim())*60 + parseInt(endTime.split(":")[2].trim()) // converting the end time to total seconds
var base=0; // variable used to mention which part of the table, will the event be added to
var skip=0; // used as an variable to determine, whther to go to the next part or not
for (const [key, value] of dicte) { // iterating over the dict
for (const data of value){ // iterating over the array of current part's event time positions
var currentstart=data[0] // extracting the start-time
var currentend=data[1] // extracting the end-time
if( // if cases to check all the possible overlapping conditions
(startTime<=currentstart && (endTime>=currentstart && endTime<currentend)) || // checks for events starting earlier than the previous event but ending after the start of previous event
((startTime>=currentstart && startTime<currentend) && endTime>=currentend) || // checks for events starting in between of previous event but ending after the completion
((startTime>=currentstart && startTime<currentend) && (endTime>=currentstart && endTime<currentend)) || // checks for events starting and ending inbetween of previous events
(startTime<=currentstart && endTime>=currentend) // checks for events starting before and ending later than the previous events
){
skip=1; // if any of the condition satisfies, then break from the loop and skip to the next part of the body
break;
}
}
if(skip==1){
base+=25; // skipping to next part by adding 25%
}else break;// if skip == 0 meaning no collision or overlapping found in this part
skip=0;// to reset the value for new part
}
var arr=(dicte.get(base)||[]);// get or create a new array for storing current part's events time
arr.push([startTime,endTime]);// adding the current event time
dicte.set(base,arr);// updating the dict
e.style.setProperty("left",(base+"%"),"important"); // positioning the event based upon the base value
e.style.setProperty('right','0%','important'); // setting it to zero always, providies clarity of logic
}
added an image which was used to develop the overlapping check condition, not sure if you understand it due to incomplete drawing, but still for reference
so the working in simple words is that the time is converted to seconds,for example
- 10:00:00 => 36,000seconds
- 22:00:00 => 79,200seconds
used 24-hr format, to make this solution work use 24hr format only to get the time and conversion to seconds, hope the above example was enough to understand why 23-hr format is used
okay so after converting the time to seconds it becomes way easier to compare with other event times, specially when dealing with a fixed size column ( 25% width ), instead of a matrix or table with uneven row sizes
so the control flow is like when an event is added the event time is converted to seconds , then every part of the table from beginning is checked in a column wise manner, where the event can be replaced without overlapping, after checking. the part is returned and required changes are made to the left and right style property of the event
according to me , while developing the code i have taken care of all the possible use cases, if i have left out any, please feel free to reach out
also if there is any part of the code that you feel, i havent explained, you can still contact
