carlok/kcalendar.html

## kcalendar.html
<!doctype html>
<html ng-app="kcalendarApp">
  <head>
    <link rel="stylesheet" href="./css/bootstrap-3.3.5-dist/css/bootstrap.min.css" />

    <script src="./js/jquery-2.1.3.js"></script>
    <script src="./js/angular-1.5.0/angular.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>

    <script src="./js/ui-bootstrap-tpls-2.4.0.min.js"></script>
  </head>
  <body>

<div class="container" ng-controller="kcalendarCtrl">
    <div class="row">
      <div class="col-md-12">
        <hr />
      </div>
    </div>

    <div class="row">
      <div class="col-md-4">
        <kcalendar-component mydateformat="dd/MM/yyyy"></kcalendar-component>
      </div>
    </div>

</div>

<script type="text/javascript">
angular.module('kcalendarApp', ['ui.bootstrap'])
  .controller('kcalendarCtrl', function() {

  })
  .component('kcalendarComponent', {
    /*
    REFERENCE
    - https://angular-ui.github.io/bootstrap/#/datepickerPopup
    - https://scotch.io/tutorials/how-to-use-angular-1-5s-component-method
    */

    // isolated scope binding
    bindings: {
      mydateformat: '@'
    },

    // Inline template which is binded to message variable
    // in the component controller
    template: '<p class="input-group"><input type="text" class="form-control" uib-datepicker-popup="{{$ctrl.format}}" ng-model="$ctrl.dt" ng-click="$ctrl.open1()" is-open="$ctrl.popup1.opened" datepicker-options="$ctrl.dateOptions" ng-required="true" close-text="Close" readonly="readonly"/></p>',

    // The controller that handles our component logic
    controller: function() {
      this.clear = function() {
        this.dt = null;
      };

      this.open1 = function() {
        this.popup1.opened = true;
      };

      this.setDate = function(year, month, day) {
        this.dt = new Date(year, month, day);
      };

      this.today = function() {
        this.dt = new Date();
      };

      this.toggleMin = function() {
        this.inlineOptions.minDate = this.inlineOptions.minDate ? null : new Date();
        this.dateOptions.minDate = this.inlineOptions.minDate;
      };

      this.dateOptions = {
        dateDisabled: disabled,
        formatYear: 'yy',
        maxDate: new Date(2028, 12, 31),
        minDate: new Date(),
        startingDay: 1
      };

      this.inlineOptions = {
        customClass: getDayClass,
        minDate: new Date(),
        showWeeks: true
      };

      // Disable weekend selection
      function disabled(data) {
        var date = data.date,
          mode = data.mode;
        return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
      }

      function getDayClass(data) {
        var date = data.date,
          mode = data.mode;
        if (mode === 'day') {
          var dayToCheck = new Date(date).setHours(0, 0, 0, 0);

          for (var i = 0; i < this.events.length; i++) {
            var currentDay = new Date(this.events[i].date).setHours(0, 0, 0, 0);

            if (dayToCheck === currentDay) {
              return this.events[i].status;
            }
          }
        }

        return '';
      }

      var tomorrow = new Date();
      tomorrow.setDate(tomorrow.getDate() + 1);

      var afterTomorrow = new Date();
      afterTomorrow.setDate(tomorrow.getDate() + 1);

      this.events = [{
        date: tomorrow,
        status: 'full'
      }, {
        date: afterTomorrow,
        status: 'partially'
      }];

      this.format = this.mydateformat || 'dd/MM/yyyy';
      this.popup1 = {
        opened: false
      };

      this.today();
      this.toggleMin();
    }
  });
</script>

  </body>
</html>
	<!doctype html>
	<html ng-app="kcalendarApp">
	<head>
	<link rel="stylesheet" href="./css/bootstrap-3.3.5-dist/css/bootstrap.min.css" />

	<script src="./js/jquery-2.1.3.js"></script>
	<script src="./js/angular-1.5.0/angular.min.js"></script>
	<script src="./js/bootstrap.min.js"></script>

	<script src="./js/ui-bootstrap-tpls-2.4.0.min.js"></script>
	</head>
	<body>

	<div class="container" ng-controller="kcalendarCtrl">
	<div class="row">
	<div class="col-md-12">
	<hr />
	</div>
	</div>

	<div class="row">
	<div class="col-md-4">
	<kcalendar-component mydateformat="dd/MM/yyyy"></kcalendar-component>
	</div>
	</div>

	</div>

	<script type="text/javascript">
	angular.module('kcalendarApp', ['ui.bootstrap'])
	.controller('kcalendarCtrl', function() {

	})
	.component('kcalendarComponent', {
	/*
	REFERENCE
	- https://angular-ui.github.io/bootstrap/#/datepickerPopup
	- https://scotch.io/tutorials/how-to-use-angular-1-5s-component-method
	*/

	// isolated scope binding
	bindings: {
	mydateformat: '@'
	},

	// Inline template which is binded to message variable
	// in the component controller
	template: '<p class="input-group"><input type="text" class="form-control" uib-datepicker-popup="{{$ctrl.format}}" ng-model="$ctrl.dt" ng-click="$ctrl.open1()" is-open="$ctrl.popup1.opened" datepicker-options="$ctrl.dateOptions" ng-required="true" close-text="Close" readonly="readonly"/></p>',

	// The controller that handles our component logic
	controller: function() {
	this.clear = function() {
	this.dt = null;
	};

	this.open1 = function() {
	this.popup1.opened = true;
	};

	this.setDate = function(year, month, day) {
	this.dt = new Date(year, month, day);
	};

	this.today = function() {
	this.dt = new Date();
	};

	this.toggleMin = function() {
	this.inlineOptions.minDate = this.inlineOptions.minDate ? null : new Date();
	this.dateOptions.minDate = this.inlineOptions.minDate;
	};

	this.dateOptions = {
	dateDisabled: disabled,
	formatYear: 'yy',
	maxDate: new Date(2028, 12, 31),
	minDate: new Date(),
	startingDay: 1
	};

	this.inlineOptions = {
	customClass: getDayClass,
	minDate: new Date(),
	showWeeks: true
	};

	// Disable weekend selection
	function disabled(data) {
	var date = data.date,
	mode = data.mode;
	return mode === 'day' && (date.getDay() === 0 \|\| date.getDay() === 6);
	}

	function getDayClass(data) {
	var date = data.date,
	mode = data.mode;
	if (mode === 'day') {
	var dayToCheck = new Date(date).setHours(0, 0, 0, 0);

	for (var i = 0; i < this.events.length; i++) {
	var currentDay = new Date(this.events[i].date).setHours(0, 0, 0, 0);

	if (dayToCheck === currentDay) {
	return this.events[i].status;
	}
	}
	}

	return '';
	}

	var tomorrow = new Date();
	tomorrow.setDate(tomorrow.getDate() + 1);

	var afterTomorrow = new Date();
	afterTomorrow.setDate(tomorrow.getDate() + 1);

	this.events = [{
	date: tomorrow,
	status: 'full'
	}, {
	date: afterTomorrow,
	status: 'partially'
	}];

	this.format = this.mydateformat \|\| 'dd/MM/yyyy';
	this.popup1 = {
	opened: false
	};

	this.today();
	this.toggleMin();
	}
	});
	</script>

	</body>
	</html>