LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Test Assignemnt

CSS
body{
    background: #2f3238;
    color: #fff;
    font-weight: 400;
    font-size: 1em;
    font-family: 'helvetica', Arial, sans-serif;
}
h1{
    clear: both;
    margin: 0;
    padding: 1em 1%;
    color: #484B54;
    font-weight: 800;
    font-size: 1.5em;
    text-align:center;
}
.calendar {
  border: 1px solid #fff;
  position: absolute;
  width: 600px;
  height: 1440px;
  left: 60px;
  color:#000;
  text-align:center;
}

.event {
  position: absolute;
  width: 100%;
}

#timeline {
  position: absolute;
  float: left;
}
JS
/*
 * @group meeting managment 
 * App to manage meeting
 * @author saorbah
 * @methods
 * var methodname =  ( function() { } )
 *
 *
 */
var common = (function () {
// Define a Local copy 
// Method
  var common = {
    domLocals: {
      timeLine  : $('#timeline')
      , jCl     : $('#calendar')
    },
    init: function () {
      var updatedMeetingData
          ,defaultTimeBlk
          ;
      updatedMeetingData = [{
          id: 1,
          start: 60,
          end: 80
        }, {
          id: 2,
          start: 60,
          end: 80
        }, {
          id: 3,
          start: 60,
          end: 80
        }, {
          id: 4,
          start: 90,
          end: 130
        }, {
          id: 5,
          start: 100,
          end: 150
        },{
          id: 6,
          start: 140,
          end: 200
        },{ 
          id: 7,
          start: 200,
          end: 230
        }];
      defaultTimeBlk = ['9AM', '10AM', '11AM', '12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM', '8PM', '9PM'];
      common.creatTimeline(defaultTimeBlk);
      common.getEvents(updatedMeetingData);
    },
    getRandomColor: function () {
      var randomColor = Math.floor(Math.random() * 16777215).toString(16);
      return '#' + randomColor;
    },
    creatTimeline: function (mJASONData) {
      var iDx = 0
        , jQEl
        ;
      while (iDx < mJASONData.length) {

        jQEl = $("
"); jQEl.css({ "width": "50px" , "height": "120px" , "border": "0px solid red" }) ; jQEl.html(mJASONData [ iDx ]); common.domLocals.timeLine.append(jQEl); iDx++; } }, appendingMeetingData: function (meetingArray) { var iDx = 0 , jMEl ; while (iDx < meetingArray.length) { var jMEl = $("
"); jMEl.addClass('event'); jMEl.css({ "width": meetingArray[ iDx ].width , "height": meetingArray[ iDx ].height , "top": meetingArray[ iDx ].top , "background": meetingArray[ iDx ].color , "left": meetingArray[ iDx ].left , "border": "0px solid red" }) ; jMEl.html('Meeting - ' + meetingArray[ iDx ].id); common.domLocals.jCl.append(jMEl); iDx++; } }, collidesWith: function (paramA, paramB) { return paramA.end > paramB.start && paramA.start < paramB.end; }, checkCollision: function (meetingArray) { var iDx = 0 , iDy = 0 ; for (iDx = 0; iDx < meetingArray.length; iDx++) { meetingArray[ iDx ].cols = []; for (iDy = 0; iDy < meetingArray.length; iDy++) { if (common.collidesWith(meetingArray[ iDx ], meetingArray[ iDy ])) { meetingArray[ iDx ].cols.push(iDx); } } } return meetingArray; }, updateEvents: function (meetingArray) { meetingArray = common.checkCollision(meetingArray); var arr = [] ; arr = meetingArray.map(function (el) { //To differentiate each event with different colours el.color = common.getRandomColor(); el.height = (el.end - el.start) * 2 + 'px'; el.top = (el.start) * 2 + 'px'; el.width = (600 / el.cols.length) + 'px'; el.left = (600 / el.cols.width) + 'px'; return el; }); return arr; }, getEvents: function (meetingArray) { meetingArray.sort(function (paramA, paramB) { return paramA.start - paramB.start; }); meetingArray = common.updateEvents(meetingArray); common.appendingMeetingData(meetingArray); return meetingArray; } }; common.init(); return common; })();
Term
Wed, 12/27/2017 - 06:56

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv