VannilaJS-Exam

function createCalendar(selector, events) {
    var contentDiv = document.querySelector(selector);
    var table = ''
    table += '<table id="table"><tr>';
    var arrayWithEvent = events.sort(function (a, b) { return a.date - b.date });
    for (var i = 1; i < 31; i++) {
        var content = '';
        for (var k = 0; k < arrayWithEvent.length; k++) {
            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 class="date-description">' + content + '<div>';
        table += currentDate;
        if (i % 7 == 0) {
            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';
        td[i].style.height = '100px';
        td[i].style.position = 'relative';
        td[i].style.border = '2px solid black';
        td[i].style.borderCollapse = 0;

    }
    var dateDiv = document.getElementsByClassName('date');
    function onMouseOver(){
        this.style.background = 'gray';
    }
    function onMouseOut() {
        this.style.background = 'lightgray';
    }
    function onClick() {
        var dateDiv = document.getElementsByClassName('date');
        for (var i = 0, len1 = dateDiv.length; i < len1; i++) {
            dateDiv[i].style.background = 'lightgray';
            dateDiv[i].addEventListener('mouseover', onMouseOver,false);
            dateDiv[i].addEventListener('mouseout', onMouseOut,false);
        }
        this.removeEventListener('mouseover', onMouseOver, false);
        this.removeEventListener('mouseout', onMouseOut, false);
        this.style.background = 'white';
    }

    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].style.background = 'lightgray';
        dateDiv[i].style.width = '132px';
        dateDiv[i].style.textAlign = 'center';
        dateDiv[i].style.borderBottom = '1px solid black';
        dateDiv[i].addEventListener('mouseover', onMouseOver,false);
        dateDiv[i].addEventListener('mouseout', onMouseOut,false);
        dateDiv[i].addEventListener('click', onClick,false);

    }
}