SHARE
TWEET

JS DOM UI EXAM

a guest Jun 10th, 2014 343 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function createCalendar(selector, events) {
  2.     var element = document.querySelector(selector);
  3.     element.style.display = 'block';
  4.     element.style.width = '1100px';
  5.     var ul = document.createElement('ul');
  6.     ul.style.listStyleType = 'none';
  7.     element.appendChild(ul);
  8.     var eventDate1 = events[0].date;
  9.     var eventDate2 = events[1].date;
  10.  
  11.     function click() {
  12.         this.style.backgroundColor = '#FFF';
  13.     }
  14.  
  15.     function over() {
  16.         this.style.backgroundColor = '#999999';
  17.     }
  18.  
  19.     function out() {
  20.         this.style.backgroundColor = '#CCCCCC';
  21.     }
  22.     for (var i = 1; i < 31; i++) {
  23.         var div = document.createElement('div');
  24.         div.style.position = 'relative';
  25.         div.style.margin = '50px';
  26.         div.style.marginLeft = '0';
  27.         div.style.bottom = '50px';
  28.         div.innerHTML += '&nbsp;';
  29.         div.style.fontSize = '13px';
  30.         if (i == eventDate1) {
  31.             div.innerHTML += events[0].hour + ' ';
  32.             div.innerHTML += events[0].duration + ' ';
  33.             div.innerHTML += events[0].title;
  34.         };
  35.         if (i == eventDate2) {
  36.             div.innerHTML += events[1].hour + ' ';
  37.             div.innerHTML += events[1].duration + ' ';
  38.             div.innerHTML += events[1].title;
  39.         };
  40.         var li = document.createElement('li');
  41.         li.style.width = '140px';
  42.         li.style.height = '20px';
  43.         li.style.border = '1px solid black';
  44.         li.style.backgroundColor = '#CCCCCC';
  45.         li.style.textAlign = 'center';
  46.         li.style.display = 'inline-block';
  47.         switch (i) {
  48.             case (1):
  49.             case (8):
  50.             case (15):
  51.             case (22):
  52.             case (29):
  53.                 li.innerHTML += "Sun " + i + " June 2014";
  54.                 break;
  55.             case (2):
  56.             case (9):
  57.             case (16):
  58.             case (23):
  59.             case (30):
  60.                 li.innerHTML += "Mon " + i + " June 2014";
  61.                 break;
  62.             case (3):
  63.             case (10):
  64.             case (17):
  65.             case (24):
  66.                 li.innerHTML += "Tue " + i + " June 2014";
  67.                 break;
  68.             case (4):
  69.             case (11):
  70.             case (18):
  71.             case (25):
  72.                 li.innerHTML += "Wed " + i + " June 2014";
  73.                 break;
  74.             case (5):
  75.             case (12):
  76.             case (19):
  77.             case (26):
  78.                 li.innerHTML += "Thu " + i + " June 2014";
  79.                 break;
  80.             case (6):
  81.             case (13):
  82.             case (20):
  83.             case (27):
  84.                 li.innerHTML += "Fri " + i + " June 2014";
  85.                 break;
  86.             case (7):
  87.             case (14):
  88.             case (21):
  89.             case (28):
  90.                 li.innerHTML += "Sat " + i + " June 2014";
  91.                 break;
  92.         }
  93.         li.addEventListener('mouseover', over, false);
  94.         li.addEventListener('mouseout', out, false);
  95.         li.addEventListener('click', click, false);
  96.         ul.appendChild(li);
  97.         li.appendChild(div);
  98.     };
  99. }
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