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;
}
}
Hi, Romain
I use this one, and I got mostly everything I need.
Angular directives for Bootstrap
hope it helps. Mine shows as below, it shows the current day, grays out weekends, and set max/min dates programmatically.
