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">{{model.date}}</th></tr>
    <tr>
      <th>Mon</th>
      <th>Tue</th>
      <th>Wed</th>
      <th>Thu</th>
      <th>Fri</th>
    </tr>
  </thead>
  <tbody></tbody>
  </table>
</div>

</div>

JavaScript

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

myApp.controller('homeController', function ($scope) {
    var jsDays = [
    	{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, 08, 01) },
    dayEvents:[
    	{id:1, date: new Date(2018, 08, 07)}
    ]
    								
    };
});

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>"
  };
});