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

[Chuck Tomasi · Accepted solution]

Hi Romain,

Take a look at this date picker. I had pretty good luck with it on a widget I made a few weeks ago.

GitHub - uxsolutions/bootstrap-datepicker: A datepicker for twitter bootstrap (@twbs)

[xif1]

Hi Chuck,

That's a really nice clue,

I tried many way, but I didn't archieve with embedded / inline calendar, did you ?

I tried something like:

jQuery UI: Date Picker - JSFiddle

but it showing nothing on service portal

It works with this on service portal but showing nothing in emdebbed:

<div>

  <div id="datetimepicker" class="input-append date">

      <input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>

      <span class="add-on">

          <i data-time-icon="icon-time" data-date-icon="icon-calendar">

          </i>

      </span>

  </div>

</div>

<script>

  $(function() {

      $('#datetimepicker').datetimepicker();

  });

</script>

Do you have a clue ?

[Chuck Tomasi]

Did you set up dependencies?

Widget dependencies

[xif1]

Yes I did but maybe I missed something ?

I added

datepicker dependencies : datepicker.min.js + datepicker.min.css

sprite dependency : sprite.less

dropdowns dependency : dropdowns.less

and less dependency : less.css