Insert colored markers in datepick using angularjs, ui-bootstrap

Navigation
2

How do I insert colored markers in datepick using AngularJS and ui-bootstrap ?

Page: 

<!doctype html>
<html ng-app="app">
   <head>
      <meta charset="UTF-8">
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
      <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
      <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
      <script src="newjavascript.js" type="text/javascript"></script> 
   </head>
   <body>
      <div ng-controller="DatepickerCtrl">
         <div  tyle="display:inline-block" style="width:  310px;">
            <datepicker ng-model="dt" min-date="minDate" 
               show-weeks="true" class="well well-sm" custom-class="getDayClass(date, mode)"></datepicker>
         </div>
      </div>
   </body>
</html>

AngularJS: 

angular.module('app', ['ngAnimate', 'ui.bootstrap']);
angular.module('app').controller('DatepickerCtrl', function ($scope) {

//  $scope.toggleMin = function() {
//    $scope.minDate = $scope.minDate ? null : new Date();
//  };
    $scope.toggleMin = function () {
        $scope.maxDate = new Date(2015, 12, 12);
    };
});
    
asked by anonymous 15.12.2015 / 19:25

1 answer

0

I commented on the documentation of ui-bootstrap to try to exemplify how it works.

Here's the example: link

Notice that in this example there are two events: 

 //Marca um evento para amanhã
  var tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);

  //Marca um evento pra depois de depois de amanhã kkk rsrs ou seja 3 dias depois
  var afterTomorrow = new Date();
  afterTomorrow.setDate(tomorrow.getDate() + 2);

Both variables receive the current date, but one increments + 1 day and the other + 2. In this way the events (markers) that you want will be displayed in the calendar. Take a test later and change these values to +4, +5, etc .. That you will understand better then.

Then events are passed to a list:

// list with events, where date is date and status represents the priority 

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

So just put datepicker on your page: 

<uib-datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm" custom-class="getDayClass(date, mode)"></uib-datepicker>

The highlight goes to the custom-class directive where we call the method that mounts the events in the calendar: 

//Preenche o calendário com os eventos
  $scope.getDayClass = function(date, mode) {
    if (mode === 'day') {
      var dayToCheck = new Date(date).setHours(0,0,0,0);

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

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

    return '';
  };

Do some testing on this plnkr and try to understand how everything works, so you can work on that code as you need it.

    
15.12.2015 / 19:54
doubts about clean URL without mod_rewrite Android SurfaceView Synchronous Creation