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 | } |