View difference between Paste ID: xy2C7Ry3 and H9vXFV8U

 function createCalendar(selector, events) {
     var contentDiv = document.querySelector(selector);
-    var table = ''
+    var table = '<table id="table"><tr>';
-    table += '<table id="table"><tr>';
+
-    var arrayWithEvent = events.sort(function (a, b) { return a.date - b.date });
+
         for (var k = 0; k < events.length; k++) {
             if (events[k].date == i) {
-        for (var k = 0; k < arrayWithEvent.length; k++) {
+                content = events[k].title + ' time: ' + events[k].hour + ' Duration: ' + events[k].duration;
-            if (arrayWithEvent[k].date == i) {
+
-                content = arrayWithEvent[k].title + ' time: ' + arrayWithEvent[k].hour + ' Duration: ' + arrayWithEvent[k].duration;
+
         var date = new Date(2014, 5, i) + '';
         var date = date.substring(0, date.indexOf('2014') + 4);
         var currentDate = '<td><div class="date">' + date + '</div><div>' + content + '<div>';
         table += currentDate;
-        var currentDate = '<td><div class="date">' + date + '</div><div class="date-description">' + content + '<div>';
+
             table += '</tr><tr>'
         }
     }
     table += '</table>';
     contentDiv.innerHTML += table;
     var table = document.getElementById('table');
     table.style.borderCollapse = 'collapse';
     var td = document.getElementsByTagName('td');
     for (var i = 0, len = td.length; i < len; i++) {
         td[i].style.width = '130px';
-    for (var i = 0,len = td.length; i < len; i++) {
+
         td[i].style.position = 'relative';
         td[i].style.border = '2px solid black';
     }
 
-        td[i].style.borderCollapse = 0;
+    table.addEventListener('click', function (ev) {
         if (ev.target.classList.contains('date')) {
             if (document.getElementById('current')) {
                 var current = document.getElementById('current');
-    function onMouseOver(){
+                current.style.background = 'lightgray';
                 current.addEventListener('mouseover', onMouseOver, false);
                 current.addEventListener('mouseout', onMouseOut, false);
                 current.id = '';
             }
 
-    function onClick() {
+            ev.target.id = 'current';
-        var dateDiv = document.getElementsByClassName('date');
+            ev.target.style.background = 'white';
-        for (var i = 0, len1 = dateDiv.length; i < len1; i++) {
+            ev.target.removeEventListener('mouseover', onMouseOver, false);
-            dateDiv[i].style.background = 'lightgray';
+            ev.target.removeEventListener('mouseout', onMouseOut, false);
-            dateDiv[i].addEventListener('mouseover', onMouseOver,false);
+
-            dateDiv[i].addEventListener('mouseout', onMouseOut,false);
+    }, false)
 
-        this.removeEventListener('mouseover', onMouseOver, false);
+
-        this.removeEventListener('mouseout', onMouseOut, false);
+    function onMouseOver() {
-        this.style.background = 'white';
+
     }
 
     function onMouseOut() {
         this.style.background = 'lightgray';
     }
 
     for (var i = 0, len1 = dateDiv.length; i < len1; i++) {
         dateDiv[i].style.position = 'absolute';
         dateDiv[i].style.top = 0;
         dateDiv[i].style.left = 0;
-        dateDiv[i].addEventListener('mouseover', onMouseOver,false);
+
-        dateDiv[i].addEventListener('mouseout', onMouseOut,false);
+
-        dateDiv[i].addEventListener('click', onClick,false);
+
         dateDiv[i].style.borderBottom = '1px solid black';
         dateDiv[i].addEventListener('mouseover', onMouseOver, false);
         dateDiv[i].addEventListener('mouseout', onMouseOut, false);
     }
 }