Calendar Carousel

by Elijah Tate

HTML

<div id="parentContainer">

  <div id="calContainer">
    <div class="month">

    </div>
    <div class="previousBttn">
      <p>&lt</p>
    </div>
    <div id="calCarousel">

    </div>
    <div class="nextBttn">
      <p>&gt</p>
    </div>
  </div>
</div>

<div id="getCalDay">
  <div class="calDay">
    <div class="numDay"></div>
  </div>
</div>

CSS

body {
    background: #333;
}

#parentContainer {
    height: 100%;
}

#calCarousel {
    overflow: hidden;
    width: 70%;
    height: 60px;
    background: white;
    display: inline-block;
}

.todayBgColor{
    background: #99ebff;
}

#calContainer {
    margin-top: 100px;
    text-align: center;
}

.previousBttn,
.nextBttn {
    display: inline-block;
    height: 60px;
    width: 30px;
    background: gray;
    vertical-align: top;
    font-weight: bold;
    color: white;
}

.previousBttn:hover,
.nextBttn:hover {
    cursor: pointer;
}

.calDay {
    height: 60px;
    width: 60px;
    float: left;
    border-right: 1px solid #333;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.numDay {
    padding: 7px;
}

JavaScript

var Calendar = function() {
  //TODO finish left and right arrow functionality
  // write init funct to scroll to current day
  // think about slide functionality
  // init current month in html container
  // maybe actually pull real cal data?
  // think about adding click funct to dates
  // when at the end of the month, and then expanded 
  // empty space is shown. It may be screwing up indexing.
  var calCarousel = $("#calCarousel");
  var dayElements = [];
  var calDayWidth = 60;
  var numberOfDaysAble;
  var leftIndex = 0;
  var rightIndex = 0;
  var numOfDaysInMonth = 0;
  var todayDayInMonth = 0;

  function initCal(calData) {
    generateCalendar(calData);
    // Once I have scrolling working I will need to init
    // calendar on current day
    // scrollCalendarToCurrentDay()
    adjustCalWidth();
    setHandlers();
    showCurrentDay();
  }

  function showCurrentDay() {
    if (todayDayInMonth != 0) {
      var middleOfDaysAble = Math.floor(numberOfDaysAble / 2);
      console.log(dayElements.length);
      leftIndex = todayDayInMonth - middleOfDaysAble;
      dayElements[todayDayInMonth - 1].find(".calDay").addClass("todayBgColor");
      if (numberOfDaysAble % 2 > 0) {
        rightIndex = todayDayInMonth + middleOfDaysAble;
        console.log("CurrentDay new Left: " + leftIndex);
        console.log("CurrentDay new Right: " + rightIndex);
      } else {
        rightIndex = todayDayInMonth + middleOfDaysAble - 1;
        console.log("CurrentDay new Left: " + leftIndex);
        console.log("CurrentDay new Right: " + rightIndex);
      }
      var newIndexOfElToHide = todayDayInMonth - (middleOfDaysAble + 1);
      for (var i = 0; i < newIndexOfElToHide; i++) {
        var elToHide = dayElements[i];
        elToHide.css("display", "none");
      }
    }

  }

  function setHandlers() {
    setLeftArrowHandler();
    setRightArrowHandler();
  }

  function setLeftArrowHandler() {
    $(".previousBttn").on("click", getPreviousDays);
  }

  function...