Widget with Angular Provider (calendar)

[xif1]

Hi

I'm trying to add a calendar with an angular provider like this :

AngularJS Tutorial Series: Part 1 — Building a Calendar with LESS CSS, Font Awesome, and Moment | Co...

Did someone archieved this ?

I got this for the moment, I think I missed something

Here what I did   :

function() {
       return {
               link: function($scope) {
                       $scope.selected = _removeTime($scope.selected || moment());
                       $scope.month = $scope.selected.clone();
                       var start = $scope.selected.clone();
                       start.date(1);
                       _removeTime(start.day(0));
                       _buildMonth($scope, start, $scope.month);
                       $scope.select = function(day) {
                               $scope.selected = day.date;   
                       };
                       $scope.next = function() {
                               var next = $scope.month.clone();
                               _removeTime((next.month(next.month()+1)).date(1));
                               $scope.month.month($scope.month.month()+1);
                               _buildMonth($scope, next, $scope.month);
                       };
                       $scope.previous = function() {
                               var previous = $scope.month.clone();
                               _removeTime(previous.month(previous.month()-1).date(1));
                               $scope.month.month($scope.month.month()-1);
                               _buildMonth($scope, previous, $scope.month);
                       };
               },
   restrict: "E",
// replace: "true",
               template: "<div class='header'><i class='fa fa-angle-left' ng-click='previous()'></i><span>{{month.format('MMMM, YYYY')}}</span><i class='fa fa-angle-right' ng-click='next()'></i></div><div class='week names'><span class='day'>Sun</span><span class='day'>Mon</span><span class='day'>Tue</span><span class='day'>Wed</span><span class='day'>Thu</span><span class='day'>Fri</span><span class='day'>Sat</span></div><div class='week' ng-repeat='week in weeks'><span class='day' ng-class='{ today: day.isToday, 'different-month': !day.isCurrentMonth, selected: day.date.isSame(selected) }' ng-click='select(day)' ng-repeat='day in week.days'>{{day.number}}</span></div>"
             // $scope: {
               //       selected: "="
             // },
       };
       function _removeTime(date) {
               return date.day(0).hour(0).minute(0).second(0).millisecond(0);
       }
       function _buildMonth($scope, start, month) {
               $scope.weeks = [];
               var done = false, date = start.clone(), monthIndex = date.month(), count = 0;
               while (!done) {
                       $scope.weeks.push({ days: _buildWeek(date.clone(), month) });
                       date.add(1, "w");
                       done = count++ > 2 && monthIndex !== date.month();
                       monthIndex = date.month();
               }
       }
       function _buildWeek(date, month) {
               var days = [];
               for (var i = 0; i < 7; i++) {
                       days.push({
                               name: date.format("dd").substring(0, 1),
                               number: date.date(),
                               isCurrentMonth: date.month() === month.month(),
                               isToday: date.isSame(new Date(), "day"),
                               date: date
                       });
                       date = date.clone();
                       date.add(1, "d");
               }
               return days;
       }
}

[xif1]

So bootstrap calendar is working well, except some features like highlight the current day, or highlight the day on click how did you manage this ?

I got this :

I should have this :

<div id="datepicker2"></div>
 <div id="inputpicker2"> <input type="" id="my_hidden_input"></div>

   $('#datepicker2').datepicker();
   $('#datepicker2').on('changeDate', function() {
   $('#my_hidden_input').val(
   $('#datepicker2').datepicker('getFormattedDate')
   );
   });

[Tommy Jensen]

Can you share the steps to go through in order to implment this date picker as a directive? (and where to get the dependencies sprite, dropdowns and less).

[Tommy Jensen]

Can either of you help me with steps to implement this?

I have a danish customer that needs a danish calendar on the portal and there is a known error that the calendar in Jakarta cannot be translated on the ServicePortal so we need this calendar for the language and for the option to change the start of the week to monday instead of sunday.

[Rushit Patel2]

Hi,

this will work if you want calendar with events and very easy to configure.

AngularUI Calendar for AngularJS

(please mark helpful/like/correct if it helps)

[xif1]

I alreay used this one, quite nice but way too complicated for what I need, the bootstrap one is perfect !
But thanks for your answer rushit