Insert colored markers into datepick using Angularjs, ui-bootstrap

Asked

Viewed 333 times

2

How do I insert colored markers into 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);
    };
});
angularjs bootstrap-3 datepicker

1 answer

0


I commented on the example that is in documentation of ui-bootstrap to try to exemplify for you how it works.

Here is the example: http://plnkr.co/edit/9pdjzpEHx1jhZsapbcjS?p=preview

Note 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. This way the events (markers) you want will be displayed in the calendar. Take a test later and change these values to +4, +5, etc. Then you will understand better.

Next the events are passed to a list:

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

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

So just put the 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 directive custom-class where we call the method that assembles 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 '';
  };

Run some tests on this one plnkr and try to understand how everything works, so you can work on this code as you need it.

Browser other questions tagged angularjs bootstrap-3 datepicker

You are not signed in. Login or sign up in order to post.