I have a PHP array of "Events", for only 1 day, with start & end times (not entered chronologically) as follows:
$events_list = array(
array(
'name' => 'Event B',
'start' => '5:00pm',
'end' => '6:30pm',
),
array(
'name' => 'Event C',
'start' => '3:30pm',
'end' => '5:00pm',
),
array(
'name' => 'Event H',
'start' => '1:15pm',
'end' => '2:45pm',
),
array(
'name' => 'Event I',
'start' => '1:30pm',
'end' => '4:00pm',
),
array(
'name' => 'Event K',
'start' => '4:30pm',
'end' => '5:30pm',
),
array(
'name' => 'Event L',
'start' => '3:15pm',
'end' => '5:00pm',
),
);
I am trying to visually output these events on a horizontal timeline, something like this:
[* Event H: 1:15pm-2:45pm *] [* Event L: 3:15pm-5:00pm *][* Event B: 5:00pm-6:30pm *]
[* Event I: 1:30pm-4:00pm *] [* Event K: 4:30pm-5:30pm *]
[* Event C: 3:30pm-5:00pm *]
(Note that the above are definitely not "drawn to scale".)
As you can see, when an event has an overlapping start/end time, it needs to move to the next line below.
However, I'm having extreme difficulty coming up with a way to accomplish this, especially when an event's start/end times overlap 2 other events (For example, K's start overlaps "Event L", and K's end overlaps "Event B"), causing it to move down 2 lines instead of just 1.
This feels like quite a challenge. Any thoughts or suggestions are very much appreciated!