Generating a day event calendar based on an array of objects
Comments are in the code:



var myArray = [
    { start: 30, end: 130 },
    { start: 140, end: 147 },
    { start: 145, end: 155 },
    { start: 150, end: 175 },
    { start: 200, end: 250 }
];

var myFunc = function (dates) {

    // sort the input array from earliest start time to latest. Items with
    // identical start times will compare end times - the longer duration
    // item resolves with lower index. Assumes no exact duplicate items.
    var sortedDates = dates.sort(function (a, b) {
            // replaced the 
            // var caseOne = (a.end &gt; b.end) ? -1 : 1,
            //     caseTwo = a.start - b.start;
            // return (a.start===b.start) ? caseOne : caseTwo
            // with a shorter short cut, considering the start value are the same,
            // it evaluates to falsy (0) and the other part is taken, if evaluated 
            // to truthy, the value of the first difference is taken.
            return a.start - b.start || b.end - a.end;
        }),
        factor = 2; // for some more space

    // i change the for (...) loop to the more handy Array.forEach loop
    sortedDates.forEach(function (item, i, o) {

        var itemDuration = factor * (item.end - item.start), // applied factor
            itemTop = factor * item.start,                   // applied factor
            prevItem = o[i - 1],
            nextItem = o[i + 1],
            newDiv = document.createElement('div');

        // set a default direction to each item
        item.direction = 'left';

        // determine which items overlap and set a property to indicate
        // changed the comparison nextItem !== undefined to simply nextItem
        // and the subtraction to a direct comparison
        if (nextItem &amp;&amp; item.end &gt; nextItem.start) {
            item.overlap = true;
            nextItem.overlap = true;
        }

        // ensure items flow in UI by staggering overlapping items
        // changed the comparison prevItem !== undefined to simply prevItem
        if (prevItem &amp;&amp; prevItem.direction === 'left') {
            item.direction = 'right';
        }

        // set class names on new DOM element based on overlap
        // replaced item.overlap === true with item.overlap because if not set
        // then it evaluates to false and if set, but false the it stays false, 
        // otherwise if set and set to true, it evaluates true, then no furter
        // comparison is needed

        // the other change is the comparison of item.hasOwnProperty('direction')
        // here logical or is applied, because item.direction evaluates to false
        // if not set, with the || '' we get an empty string, but if set, then
        // only this result becomes the value
        item.overlap &amp;&amp; newDiv.setAttribute('class', 'split ' + item.direction || '');

        //set the size and position based on computed duration and start time
        newDiv.setAttribute('style', 'height:' + itemDuration + 'px; top:' + itemTop + 'px');
        // to see some information
        newDiv.innerText = i + ': ' + item.start + ' - ' + item.end;

        //insert new element into DOM
        console.log(newDiv);
        document.getElementById('calendar').appendChild(newDiv);
    });

};

myFunc(myArray);
#calendar {
    height: 720px;
    width: 100%;
    position: relative;
}
#calendar div {
    position: absolute;
    width: 100%;
    min-height: 5px;
    background: brown;
}
#calendar .split {
    width: 50%;
    background: pink;
}
.right {
    right: 0;
}
.left {
    left: 0;
}
&lt;div id="calendar"&gt;&lt;/div&gt;