AngularJs - Build Calendar

by douglasloyo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="homeController">
  <div ng-repeat="d in data" ng-if="$even">
      {{d.DisplayOrder}}
  </div>
  <div ng-repeat="d in data" ng-if="$odd">
      {{d.DisplayOrder}}
  </div>
  
  <table id="calendar">
  <thead>
   <tr><th colspan="5">{{calModel.monthName}}</th></tr>
    <tr>
      <th>Mon</th>
      <th>Tue</th>
      <th>Wed</th>
      <th>Thu</th>
      <th>Fri</th>
    </tr>
  </thead>
  <tbody></tbody>
  </table>
  
  <span>{{calModel.monthName}}</span>
  <span>{{calModel.endDate}}</span>
  <span>FirstWeekDay: {{calModel.firstWeekDay}}</span>
</div>

</div>

JavaScript

/* Application */
var myApp = angular.module('myApp', []);

myApp.controller('homeController', function ($scope) {

    var monthNames = ["January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December"];
    
    var weekNames = [
    	{id:0, short:"Sun", day:"Sunday"},
      {id:1, short:"Mon", day:"Monday"},
      {id:2, short:"Tue", day:"Tuesday"},
      {id:3, short:"Wed", day:"Wednesday"},
      {id:4, short:"Thu", day:"Thursday"},
      {id:5, short:"Fri", day:"Friday"},
      {id:6, short:"Sat", day:"Saturday"}
    ];
    
    $scope.info = "Algo";
		$scope.model = {
      date:{ id:1, date: new Date(2018, 07, 01) },
      events:[
        {id:1, date: new Date(2018, 07, 07)}
      ]						
    };
    
    // Gets the first day of the month that fall between M-F
    var getFirstWeekDay = function(datee){
        var date = new Date(datee.valueOf());
        
        // If Sunday then add 1 day
    		if(date.getDay()==0)
        	date.setDate(date.getDate() + 1);
          
        // If Saturday then add 2 days
        if(date.getDay()==6)
        	date.setDate(date.getDate() + 2);
          
        // Else return the date
        return date;
    };
    
    // Build Calendar Model
    var startDate = new Date(2018, 08, 01);
    $scope.calModel = {
      monthName: monthNames[startDate.getMonth()],
    	startDate: startDate,
      endDate: new Date(startDate.getFullYear(), startDate.getMonth()+1, 0),
      firstWeekDay: getFirstWeekDay(startDate),
    };
    
    
});

myApp.directive('myCalendar', function() {
  return {
    scope: {
        date: '=',
        dayEvents: '=',        
      },
    template: "<input type='text' ng-model='info' ><div ng-repeat='c in model.calendar'>{{c.date}}</div>"
  };
});