Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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);
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement