So I'm stuck on this problem for around a week, tried different approaches and having a hard time coming up with a solution.

What I'm trying to achieve is to fit blocks horizontally inside another block.

Overlapping blocks would be "pushed" horizontally, blocks should resize to fit the container block.

Please see images, hope it makes more sense.

enter image description here

Can anyone point me to the right direction here?

I'm trying to come up with a solution for displaying a time schedule. The black outline can be considered as a "day" and the red boxes are the "events" in that day. Each event has a start and an end time, hence the different lengths.

The two images are two examples of how the events should be organaized with two different sets of input.

Overlapping events means that their start and end times hits other events duration.

The goal is to stack the events from left to right in case of overlapping while resize and position them accordingly.

  • 1
    more explanation needed – Ewan May 9 '18 at 9:53
  • What is the relationship between the two images? What do you mean by "overlapping"? What does it mean to "push" a block? – BobDalgleish May 9 '18 at 14:45
  • How does the box on the left relate to the one on the right? I think browsers do this kind of thing, as they flow various content to fit in arbitrarily sized windows. You might search on how browsers flow UI. – Erik Eidt May 9 '18 at 15:06
  • Lets considerar a simplified example where you only have two events and each event has 60% duration of a day. If you have two events overlapping, you probably should not shrink them, you apparently want to move the overlapping event that start after to the finish time of the first event. But in that case either your "outer block" must go wider (meaning it does not represent a day anymore) or the moved event can eventually go out of the outer box. If that is not allowed then you need to shrink one event or the other or both. There is a need for additional rules to make the solution unique. – Mandrill May 9 '18 at 22:50
  • Also take a look on PERT/CPM schedullng. – Mandrill May 9 '18 at 22:51

This is roughly how I managed to solve it.

First I minimized number of columns by finding maximal number of not intersected events on each step, then I grouped them together, and after that resize the rest of events to fit free space.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.