+
{{ day | date:dayTooltipFormat }}
{{ day | date:dayFormat }}
diff --git a/src/angular-material-calendar.js b/src/angular-material-calendar.js
index e16b943..7781851 100644
--- a/src/angular-material-calendar.js
+++ b/src/angular-material-calendar.js
@@ -5,11 +5,14 @@ angular.module("materialCalendar").constant("materialCalendar.config", {
debug: document.domain.indexOf("localhost") > -1
});
-angular.module("materialCalendar").config(["materialCalendar.config", "$logProvider", "$compileProvider", function (config, $logProvider, $compileProvider) {
+angular.module("materialCalendar").config(["materialCalendar.config", "$logProvider", "$compileProvider", "$mdIconProvider", function (config, $logProvider, $compileProvider, $mdIconProvider) {
if (config.debug) {
$logProvider.debugEnabled(false);
$compileProvider.debugInfoEnabled(false);
}
+ /* tslint:disable:max-line-length */
+ $mdIconProvider.icon("md-tabs-arrow", "data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9ImN1cnJlbnRDb2xvciI+PHBvbHlnb24gcG9pbnRzPSIxNS40LDcuNCAxNCw2IDgsMTIgMTQsMTggMTUuNCwxNi42IDEwLjgsMTIgIi8+PC9nPjwvc3ZnPg==", 24);
+ /* tslint:enable:max-line-length */
}]);
angular.module("materialCalendar").service("materialCalendar.Calendar", [function () {
@@ -40,7 +43,7 @@ angular.module("materialCalendar").service("materialCalendar.Calendar", [functio
this.setNoOfDays = function (i) {
var d = parseInt(i || 0, 10);
- if (!isNaN(d) && d > 0 ) {
+ if (!isNaN(d) && d > 0) {
this.noOfDays = d;
} else {
this.noOfDays = 0;
@@ -90,21 +93,21 @@ angular.module("materialCalendar").service("materialCalendar.Calendar", [functio
}
// First day of calendar month.
- if ( angular.isDefined(this.options.startDateOfMonth) ) {
+ if (angular.isDefined(this.options.startDateOfMonth)) {
this.start = new Date(this.year, this.month, this.startDateOfMonth);
} else {
this.start = new Date(this.year, this.month, 1);
}
var date = angular.copy(this.start);
- if ( date.getDate() === 1) {
- while ( date.getDay() !== this.weekStartsOn) {
+ if (date.getDate() === 1) {
+ while (date.getDay() !== this.weekStartsOn) {
date.setDate(date.getDate() - 1);
monthLength++;
}
}
- if ( this.noOfDays !== 0) {
+ if (this.noOfDays !== 0) {
while (this.noOfDays % 7 !== 0) {
this.noOfDays++;
}
@@ -153,11 +156,11 @@ angular.module("materialCalendar").service("MaterialCalendarData", [function ()
this.data = {};
- this.getDayKey = function(date) {
+ this.getDayKey = function (date) {
return [date.getFullYear(), date.getMonth() + 1, date.getDate()].join("-");
};
- this.setDayContent = function(date, content) {
+ this.setDayContent = function (date, content) {
this.data[this.getDayKey(date)] = content || this.data[this.getDayKey(date)] || "";
};
}
@@ -203,10 +206,13 @@ angular.module("materialCalendar").directive("calendarMd", ["$compile", "$parse"
noOfDays: "=?",
clearDataCacheOnLoad: "=?",
disableFutureSelection: "=?",
- disableSelection: "=?"
+ disableSelection: "=?",
+ daysToDisable: "=?",
+ disabledDayClick: "=?",
+ dateFilter: "=?"
},
link: function ($scope, $element, $attrs) {
-
+ // debugger;
// Add the CSS here.
injectCss();
@@ -249,16 +255,31 @@ angular.module("materialCalendar").directive("calendarMd", ["$compile", "$parse"
d.getMonth() === $scope.calendar.month;
};
- $scope.isDisabled = function (date,startDateOfMonth,noOfDays) {
- if (noOfDays!=0 && angular.isDefined(noOfDays)) {
- var dateStart = new Date($scope.calendar.year,$scope.calendar.month,startDateOfMonth);
+ var chkDisabledDay = function (date) {
+ if ($scope.daysToDisable) {
+ return $scope.daysToDisable.filter(function (day) {
+ return day.getFullYear() === date.getFullYear()
+ && day.getMonth() === date.getMonth()
+ && day.getDate() === date.getDate();
+ }).length > 0;
+ }
+ return false;
+ };
+
+ $scope.isDisabled = function (date, startDateOfMonth, noOfDays) {
+ if (noOfDays != 0 && angular.isDefined(noOfDays)) {
+ var dateStart = new Date($scope.calendar.year, $scope.calendar.month, startDateOfMonth);
var dateEnd = angular.copy(dateStart);
- dateEnd.setDate(dateStart.getDate()+parseInt(noOfDays));
+ dateEnd.setDate(dateStart.getDate() + parseInt(noOfDays));
if (date.getDate() <= dateStart && date.getDate() >= dateEnd) { return true; }
}
if ($scope.disableSelection) { return true; }
if ($scope.disableFutureSelection && date > new Date()) { return true; }
- return !$scope.sameMonth(date);
+ if (!$scope.sameMonth(date)) { return true; }
+
+ if ($scope.dateFilter) { return $scope.dateFilter(date); }
+ if (chkDisabledDay(date)) { return true; }
+ return false;
};
$scope.calendarDirection = $scope.calendarDirection || "horizontal";
@@ -329,11 +350,16 @@ angular.module("materialCalendar").directive("calendarMd", ["$compile", "$parse"
$scope.handleDayClick = function (date) {
- if($scope.disableFutureSelection && date > new Date()) {
+ if ($scope.disableFutureSelection && date > new Date()) {
+ return;
+ }
+
+ if ($scope.disableSelection) {
return;
}
- if($scope.disableSelection) {
+ if ($scope.isDisabled(date)) {
+ handleCb($scope.disabledDayClick, angular.copy(date));
return;
}
@@ -437,7 +463,7 @@ angular.module("materialCalendar").directive("calendarMd", ["$compile", "$parse"
});
};
- $scope.$watchGroup(["weekStartsOn","startDateOfMonth","noOfDays"], init);
+ $scope.$watchGroup(["weekStartsOn", "startDateOfMonth", "noOfDays"], init);
bootstrap();
// These are for tests, don't remove them..
diff --git a/src/angular-material-calendar.scss b/src/angular-material-calendar.scss
index 8ab8be0..f654a24 100644
--- a/src/angular-material-calendar.scss
+++ b/src/angular-material-calendar.scss
@@ -1,7 +1,10 @@
-$calendar-md-background-active: rgba(0, 0, 0, .02) !default;
+// $calendar-md-background-active: rgba(0, 0, 0, .02) !default;
+// $calendar-md-shadow-active: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12) !default;
+$calendar-md-background-active: #C3E0FC !default;
$calendar-md-shadow-active: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12) !default;
$calendar-md-border: 1px solid rgba(0, 0, 0, .12) !default;
-$calendar-md-background-hover: rgba(0, 0, 0, .04) !default;
+// $calendar-md-background-hover: rgba(0, 0, 0, .04) !default;
+$calendar-md-background-hover: $calendar-md-background-active;
$calendar-md-event-background: rgba(150, 202, 45, 1) !default;
calendar-md {
@@ -33,7 +36,7 @@ calendar-md {
> * {
&.disabled {
color: rgba(0, 0, 0, .3);
- pointer-events: none;
+ // pointer-events: none;
cursor: auto;
}
&.has-events {
@@ -70,7 +73,7 @@ calendar-md {
// Subheader row.
> :first-child {
- background: $calendar-md-background-active;
+ background: rgba(0, 0, 0, .02);
border-bottom: $calendar-md-border;
margin-right: 0;
min-height: 36px;
@@ -86,18 +89,24 @@ calendar-md {
border-right: $calendar-md-border;
cursor: pointer;
- &:hover {
- background: $calendar-md-background-hover;
+ &.disabled:focus {
+ outline-style: none;
+ }
+
+ &:not(.disabled){
+ &:hover {
+ background: $calendar-md-background-hover;
+ }
}
&.disabled {
color: rgba(0, 0, 0, .3);
- pointer-events: none;
+ // pointer-events: none;
cursor: auto;
}
&.active {
- box-shadow: $calendar-md-shadow-active;
+ // box-shadow: $calendar-md-shadow-active;
background: $calendar-md-background-active;
}
@@ -114,6 +123,7 @@ calendar-md {
:last-child {
overflow: hidden;
text-overflow: ellipsis;
+ min-height: 45px;
}
}
}