To start off, here's a friendly suggestion regarding how to fill the objects. Instead of using sub arrays, consider defining objects directly. For instance:
days[0] = {
start: "9-3",
title: "Fritz",
dur: 1
};
Another approach would be to define an object and then create the array from it
function Event(start, title, duration){
this.start = start;
this.title = title;
this.dur = duration;
}
var days = [
new Event('9-3', 'Fritz', 1),
new Event('9-5', 'huhu', 3),
new Event('9-5', 'dieter', 1),
new Event('9-7', 'party', 8),
new Event('9-8', 'new', 2),
];
This method streamlines the initialization process, and interestingly, your current code will still function properly when using these objects (as JavaScript automatically matches key names to property names in the objects)
Going a step further, the object definition could handle date parsing and determine the end time. This way, any other necessary values can be stored as well.
Returning to the main issue at hand, instead of immediately adding the events to the days, we need to identify the grids that are already in use. One way to do this is by first determining all the days with assigned grids. To accomplish this without affecting the days variable outside its scope, it's best to first filter out all events for a specific day, followed by collecting the events that already have a grid assigned. The filter function in JavaScript (for arrays) comes in handy for this task:
var events = days.filter(function(e){ return e.start <= d && e.end >= d;});
if(events.length){
var grid = 1,
gridstaken = events.filter(function(e){return e.grid}),
getfreegrid = gridstaken.length ?
function(){while(gridstaken.some(function(e){return e.grid===grid;})){grid++;}return grid++;}
: function(){return grid++;};
//etc
FIDDLE / FIDDLE2
In the first filter, an 'end' property is utilized, which was added in the example code but can also be achieved in your original code by comparing start and incrementing accordingly. In the example fiddle, I've demonstrated moving much of the logic to the Event object to showcase the benefits of this approach, although you can selectively incorporate parts into your existing code.
The second filter generates an array of events with an allocated grid. Lastly, the getfreegrid function increments the grid index if it's already taken. Additionally, I've included a skip mechanism if no grids are assigned, though this is optional.
edit
As seen in the initial example, the code primarily modifies the text of 'grid' without specifically handling positioning. For an illustration involving positioning, refer to this link: click here. It features an encapsulating div with relative positioning, sets the CSS of the title class to absolute, and manipulates the style.top attribute during addition for positioning. While not the most conventional CSS approach, it serves the intended purpose effectively.
A quick side note: When dealing with overlapping months, ensure that the previous month has been added for the above code to function correctly.