SHARE
TWEET

Exam-VanillaJS

DonJabone Jun 10th, 2014 347 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function createCalendar(selector, events) {
  2.     var contentDiv = document.querySelector(selector);
  3.     var table = '<table id="table"><tr>';
  4.     for (var i = 1; i < 31; i++) {
  5.         var content = '';
  6.         for (var k = 0; k < events.length; k++) {
  7.             if (events[k].date == i) {
  8.                 content = events[k].title + ' time: ' + events[k].hour + ' Duration: ' + events[k].duration;
  9.             }
  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.         if (i % 7 == 0) {
  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.         td[i].style.height = '100px';
  27.         td[i].style.position = 'relative';
  28.         td[i].style.border = '2px solid black';
  29.     }
  30.  
  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.                 current.style.background = 'lightgray';
  36.                 current.addEventListener('mouseover', onMouseOver, false);
  37.                 current.addEventListener('mouseout', onMouseOut, false);
  38.                 current.id = '';
  39.             }
  40.  
  41.             ev.target.id = 'current';
  42.             ev.target.style.background = 'white';
  43.             ev.target.removeEventListener('mouseover', onMouseOver, false);
  44.             ev.target.removeEventListener('mouseout', onMouseOut, false);
  45.         }
  46.     }, false)
  47.  
  48.     var dateDiv = document.getElementsByClassName('date');
  49.     function onMouseOver() {
  50.         this.style.background = 'gray';
  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].style.background = 'lightgray';
  62.         dateDiv[i].style.width = '132px';
  63.         dateDiv[i].style.textAlign = 'center';
  64.         dateDiv[i].style.borderBottom = '1px solid black';
  65.         dateDiv[i].addEventListener('mouseover', onMouseOver, false);
  66.         dateDiv[i].addEventListener('mouseout', onMouseOut, false);
  67.     }
  68. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top