View difference between Paste ID: xy2C7Ry3 and H9vXFV8U
SHOW: | | - or go back to the newest paste.
1
function createCalendar(selector, events) {
2
    var contentDiv = document.querySelector(selector);
3-
    var table = ''
3+
    var table = '<table id="table"><tr>';
4-
    table += '<table id="table"><tr>';
4+
5-
    var arrayWithEvent = events.sort(function (a, b) { return a.date - b.date });
5+
6
        for (var k = 0; k < events.length; k++) {
7
            if (events[k].date == i) {
8-
        for (var k = 0; k < arrayWithEvent.length; k++) {
8+
                content = events[k].title + ' time: ' + events[k].hour + ' Duration: ' + events[k].duration;
9-
            if (arrayWithEvent[k].date == i) {
9+
10-
                content = arrayWithEvent[k].title + ' time: ' + arrayWithEvent[k].hour + ' Duration: ' + arrayWithEvent[k].duration;
10+
11
        var date = new Date(2014, 5, i) + '';
12
        var date = date.substring(0, date.indexOf('2014') + 4);
13
        var currentDate = '<td><div class="date">' + date + '</div><div>' + content + '<div>';
14
        table += currentDate;
15-
        var currentDate = '<td><div class="date">' + date + '</div><div class="date-description">' + content + '<div>';
15+
16
            table += '</tr><tr>'
17
        }
18
    }
19
    table += '</table>';
20
    contentDiv.innerHTML += table;
21
    var table = document.getElementById('table');
22
    table.style.borderCollapse = 'collapse';
23
    var td = document.getElementsByTagName('td');
24
    for (var i = 0, len = td.length; i < len; i++) {
25
        td[i].style.width = '130px';
26-
    for (var i = 0,len = td.length; i < len; i++) {
26+
27
        td[i].style.position = 'relative';
28
        td[i].style.border = '2px solid black';
29
    }
30
31-
        td[i].style.borderCollapse = 0;
31+
    table.addEventListener('click', function (ev) {
32
        if (ev.target.classList.contains('date')) {
33
            if (document.getElementById('current')) {
34
                var current = document.getElementById('current');
35-
    function onMouseOver(){
35+
                current.style.background = 'lightgray';
36
                current.addEventListener('mouseover', onMouseOver, false);
37
                current.addEventListener('mouseout', onMouseOut, false);
38
                current.id = '';
39
            }
40
41-
    function onClick() {
41+
            ev.target.id = 'current';
42-
        var dateDiv = document.getElementsByClassName('date');
42+
            ev.target.style.background = 'white';
43-
        for (var i = 0, len1 = dateDiv.length; i < len1; i++) {
43+
            ev.target.removeEventListener('mouseover', onMouseOver, false);
44-
            dateDiv[i].style.background = 'lightgray';
44+
            ev.target.removeEventListener('mouseout', onMouseOut, false);
45-
            dateDiv[i].addEventListener('mouseover', onMouseOver,false);
45+
46-
            dateDiv[i].addEventListener('mouseout', onMouseOut,false);
46+
    }, false)
47
48-
        this.removeEventListener('mouseover', onMouseOver, false);
48+
49-
        this.removeEventListener('mouseout', onMouseOut, false);
49+
    function onMouseOver() {
50-
        this.style.background = 'white';
50+
51
    }
52
53
    function onMouseOut() {
54
        this.style.background = 'lightgray';
55
    }
56
57
    for (var i = 0, len1 = dateDiv.length; i < len1; i++) {
58
        dateDiv[i].style.position = 'absolute';
59
        dateDiv[i].style.top = 0;
60
        dateDiv[i].style.left = 0;
61-
        dateDiv[i].addEventListener('mouseover', onMouseOver,false);
61+
62-
        dateDiv[i].addEventListener('mouseout', onMouseOut,false);
62+
63-
        dateDiv[i].addEventListener('click', onClick,false);
63+
64
        dateDiv[i].style.borderBottom = '1px solid black';
65
        dateDiv[i].addEventListener('mouseover', onMouseOver, false);
66
        dateDiv[i].addEventListener('mouseout', onMouseOut, false);
67
    }
68
}