Exam-VanillaJS

function createCalendar(selector, events) {
    var contentDiv = document.querySelector(selector);
    var table = '<table id="table"><tr>';
    for (var i = 1; i < 31; i++) {
        var content = '';
        for (var k = 0; k < events.length; k++) {
            if (events[k].date == i) {
                content = events[k].title + ' time: ' + events[k].hour + ' Duration: ' + events[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;
        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';
    }

    table.addEventListener('click', function (ev) {
        if (ev.target.classList.contains('date')) {
            if (document.getElementById('current')) {
                var current = document.getElementById('current');
                current.style.background = 'lightgray';
                current.addEventListener('mouseover', onMouseOver, false);
                current.addEventListener('mouseout', onMouseOut, false);
                current.id = '';
            }

            ev.target.id = 'current';
            ev.target.style.background = 'white';
            ev.target.removeEventListener('mouseover', onMouseOver, false);
            ev.target.removeEventListener('mouseout', onMouseOut, false);
        }
    }, false)

    var dateDiv = document.getElementsByClassName('date');
    function onMouseOver() {
        this.style.background = 'gray';
    }

    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].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);
    }
}