SHARE
TWEET

Task 1 - Javascript 2 - Practice

d-kostov-dev Jun 10th, 2014 132 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function createCalendar(selector, events) {
  2.     var calendarDiv = document.querySelector(selector),
  3.         daysOfWeekArray = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  4.  
  5.     calendarDiv.style.width = "1200px";
  6.     calendarDiv.style.marginLeft = "20px";
  7.  
  8.     function createDateBlocks() {
  9.         var blocksFragment = document.createDocumentFragment(),
  10.             block = document.createElement("div"),
  11.             blockTitle = document.createElement("div");
  12.  
  13.         // Block Styles
  14.         block.style.cssFloat = "left";
  15.         block.style.width = "150px";
  16.         block.style.height = "150px";
  17.         block.style.border = "1px solid black";
  18.  
  19.         // Block Title Styles
  20.         blockTitle.style.height = "20px";
  21.         blockTitle.style.textAlign = "center";
  22.         blockTitle.style.background = "#cccccc";
  23.         blockTitle.style.fontWeight = "bold";
  24.         blockTitle.className = "blockTitle";
  25.         blockTitle.style.borderBottom = "1px solid black";
  26.  
  27.         for (var i = 0; i < 30; i++) {
  28.             block.setAttribute("id", i + 1);
  29.  
  30.             while (block.firstChild) {
  31.                 block.removeChild(block.firstChild);
  32.             }
  33.  
  34.             blockTitle.innerHTML = daysOfWeekArray[i % 7] + " " + (i + 1) + " June 2014";
  35.  
  36.             block.appendChild(blockTitle.cloneNode(true));
  37.  
  38.             var clonedBlock = block.cloneNode(true);
  39.  
  40.             clonedBlock.addEventListener("click", clickDate);
  41.             clonedBlock.addEventListener("mouseover", hoverIn);
  42.             clonedBlock.addEventListener("mouseout", hoverOut);
  43.  
  44.             blocksFragment.appendChild(clonedBlock);
  45.         }
  46.  
  47.         return blocksFragment;
  48.     }
  49.  
  50.     function addEventsToCalendar() {
  51.         for (var i = 0; i < events.length; i++) {
  52.             var currentEvent = events[i];
  53.             var currentEventBlock = document.getElementById(currentEvent.date);
  54.            
  55.             // Yeah yeah there are smarter ways im on exam and i want to do it fast;
  56.             var textToBlock = "<p style='margin:0'>";
  57.             textToBlock += currentEvent.hour + "h. ";
  58.             textToBlock += currentEvent.title + " ";
  59.             textToBlock += "</p>";
  60.            
  61.             currentEventBlock.innerHTML += textToBlock;
  62.         }
  63.     }
  64.  
  65.     function hoverIn() {
  66.         title = this.getElementsByClassName("blockTitle")[0];
  67.         title.style.background = "#999";
  68.     }
  69.  
  70.     function hoverOut() {
  71.         title = this.querySelector(".blockTitle");
  72.         if (title.parentNode.className != "selected") {
  73.             title.style.background = "#ccc";
  74.         } else {
  75.             title.style.background = "#fff";
  76.         }
  77.     }
  78.  
  79.     function clickDate() {
  80.         // Select previously selected items and remove style
  81.         var selectedElement = document.getElementsByClassName("selected")[0],
  82.             selectedElementID = 0; // Enabling Deselect of block;
  83.  
  84.         if (selectedElement != undefined) {
  85.             var titleElement = selectedElement.getElementsByClassName("blockTitle")[0];
  86.             titleElement.style.background = "#ccc";
  87.             selectedElement.setAttribute('class', '');
  88.             selectedElementID = selectedElement.getAttribute('id');
  89.         }
  90.  
  91.         if (selectedElementID !== this.id) {
  92.             // Set this item style
  93.             this.setAttribute('class', 'selected');
  94.             titleElement = this.getElementsByClassName("blockTitle")[0];
  95.             titleElement.style.background = "#fff";
  96.         }
  97.     }
  98.        
  99.     // Add blocks to main div
  100.     calendarDiv.appendChild(createDateBlocks());
  101.  
  102.     // Add Events to calendar
  103.     addEventsToCalendar();
  104. }
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