title: Angularjs: Want to start "1st date" on its respective "weekday" cell
body: <p>Want to start "1st date" on its respective "weekday" cell in AngularJS.</p>
  
  <p>Hi. I am creating the Custom Calendar and Datepicker using AngularJS. Facing Some challenges. </p>
  
  <blockquote>
    <p>HTML, CSS and Angular Controller and Script below</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('customcal', [])
    .controller('customCal', function($scope) {
  
      // we'll use the today object to test in the ng-class directive in html
      var d = new Date();
      $scope.today = {
        y: d.getFullYear(),
        m: d.getMonth(),
        d: d.getDate()
      };
  
      $scope.year = new Date().getFullYear();
  
      $scope.currentmonth = new Date().getMonth();
  
      function setSelectedDate() {
        return moment().format("Do MMM YYYY");
      }
      $scope.setSelDate = setSelectedDate();
  
      function getMonths() {
        return moment.monthsShort();
      }
      $scope.months = getMonths();
  
      function getWeeks() {
        return moment.weekdaysMin();
      }
      $scope.weeks = getWeeks();
  
  
      $scope.dateSelected = function($event, dt, month, year) {
        $scope.dtsel = 'dsel';
        $('.cc-dt').removeClass('dsel');
        angular.element(event.target).addClass('dsel');
      }
  
      $scope.changeDate = function(el, dt, month, year) {
        $scope.datesel = $scope.dateSelected(el, dt, month, year);
      };
  
      //$scope.datesel = $scope.dateSelected(null, moment().date(), moment().month(), moment().year());
  
  
      $scope.monthSelector = function($event, month, year) {
  
        // we'll use this to test in the ng-class also    
        $scope.month = (typeof month === 'number' ? month : $scope.months.indexOf(month));
  
        if ($event === null) $event = null;
  
        $('.cc-month').removeClass('msel');
        angular.element(event.target).addClass('msel');
  
        var dateCount = 1;
        var dates = [];
  
        // This block adds blanks to the beginning of the calendar
        // Because you send in number (2) and string ('Mar') for
        // month, we have to handle both cases. 
        var index = $scope.months.indexOf(month);
  
        var dayOfWeek = (new Date(year, (index === -1 ? month : index), 1)).getDay();
        while (dayOfWeek &gt; 0) {
          dates.push(' ');
          dayOfWeek--;
        }
  
        var daysom = moment(year + "-" + month, "YYYY-MMM").daysInMonth();
  
        while (dateCount &lt;= daysom) {
          dates.push(dateCount++);
        }
  
        return dates;
      };
  
      $scope.changeMonth = function(el, month, year) {
        $scope.daysofmonth = $scope.monthSelector(el, month, year);
      };
  
      $scope.daysofmonth = $scope.monthSelector(null, moment().month(), moment().year());
  
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.custom-calendar-wrapper {
    width: 100%;
    text-align: center;
    border: 1px solid #ccc;
  }
  .cal-wrapper {
    width: 240px;
    margin: 0 auto;
    text-align: center;
    font-size: 13px;
    font-family: arial;
  }
  .calender-container {
    text-align: center;
  }
  .cc-header {
    background: #E6E6E6;
  }
  .cc-year-header {
    position: relative;
  }
  .cc-year-header-today {
    position: absolute;
    top: 5px;
    right: 15px;
    color: #0044cc;
    font-size: 10px;
    cursor: pointer;
  }
  .cc-year {
    font-size: 15px;
    line-height: 16px;
    display: inline-block;
    padding: 5px 8px;
    color: #666;
  }
  .cc-month {
    cursor: pointer;
    padding: 3px 8px 2px 8px;
    font-size: 10px;
    text-transform: uppercase;
    color: #666;
    display: inline-block;
  }
  .cc-month:hover {
    background-color: #e0e0e0;
  }
  .cc-month.msel,
  .cc-month.current-month {
    background-color: #666;
    color: #eee;
  }
  .cc-nav {
    display: inline-block;
    color: #666;
    cursor: pointer;
  }
  .cc-nav:hover {
    color: #0044cc;
  }
  .selected-date {
    font-size: 20px;
    color: #666;
    margin-bottom: 5px;
  }
  .cc-dates {
    text-align: left;
  }
  .cc-week {
    background: #D2D2D2;
  }
  .cc-week,
  .cc-dates {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .cc-week li {
    padding: 2px 0;
  }
  .cc-week li,
  .cc-dates li {
    display: inline-block;
    width: 33.233333px;
    text-align: center;
    border: 1px solid #ccc;
    margin: 0 0 -1px -1px;
  }
  .cc-dates li {
    border: 1px solid #ccc;
    height: 40px;
    white-space: pre;
  }
  .dsel {
    background-color: #ddd;
  }
  .cc-today {
    background-color: #F3B14E;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link data-require="fontawesome@4.5.0" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://momentjs.com/downloads/moment.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en" ng-app="customcal"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;AngularJS Custom Calendar&lt;/title&gt;
    &lt;link data-require="fontawesome@4.5.0" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" /&gt;
    &lt;style&gt;
      label {
        display: block;
      }
    &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="cal-wrapper"&gt;
      &lt;div class="custom-calendar-wrapper" ng-controller="customCal"&gt;
        &lt;div class="selected-date" ng-bind="setSelDate"&gt;&lt;/div&gt;
        &lt;div class="cc-header"&gt;
          &lt;div class="cc-year-header"&gt;
            &lt;span class="cc-nav-left cc-nav"&gt;
                &lt;i class="fa fa-chevron-left"&gt;&lt;/i&gt;
              &lt;/span&gt;
            &lt;span class="cc-year" ng-bind="year"&gt;&lt;/span&gt;
            &lt;span class="cc-nav-right cc-nav"&gt;
                &lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;
              &lt;/span&gt;
            &lt;span class="cc-year-header-today"&gt;Today&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="cc-month-header"&gt;
            &lt;span class="cc-month" ng-class="{ 'msel' : month == today.m }" ng-repeat="month in months track by $index" ng-bind="month" ng-click="changeMonth(this, month, year);"&gt;&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;ul class="cc-week"&gt;
          &lt;li ng-repeat="week in weeks" ng-bind="week"&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;ul class="cc-dates"&gt;
          &lt;li class="cc-dt" ng-class="{ 'cc-today' : dt == today.d &amp;&amp; month == today.m &amp;&amp; year == today.y }" ng-click="changeDate(this, dt, month, year);" ng-repeat="dt in daysofmonth track by $index" ng-bind="dt"&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Could you please help me fix the following: </p>
  
  <ol>
  <li>Navigate through years (&lt; 2016 >).</li>
  <li>Highlight Current Month.</li>
  <li>Add Some information (Say: $100) below each date.</li>
  </ol>