The Now Platform® Washington DC release is live. Watch now!
03-06-2017 07:30 AM
Hi
I'm trying to add a calendar with an angular provider like this :
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;
}
}
Solved! Go to Solution.
03-06-2017 01:28 PM
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)
03-06-2017 01:28 PM
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)
03-07-2017 07:28 AM
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 ?
03-07-2017 11:55 AM
03-08-2017 07:23 AM
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