Skip to content

Commit 9e7cacc

Browse files
gavinbarrongavinbarron
committed
Merge pull request #61 from sendilkumarn/startNoOfDays
updated start Date and no Of days
2 parents e5b8dd9 + a02fb7f commit 9e7cacc

File tree

3 files changed

+109
-15
lines changed

3 files changed

+109
-15
lines changed

‎angular-material-calendar.js

+54-8
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,33 @@ angular.module("materialCalendar").service("materialCalendar.Calendar", [functio
2828
return this.weekStartsOn;
2929
};
3030

31+
this.setStartDateOfMonth = function (i) {
32+
var d = parseInt(i || 1, 10);
33+
if (!isNaN(d) && d >= 1 && d <= 31) {
34+
this.startDateOfMonth = d;
35+
} else {
36+
this.startDateOfMonth = 1;
37+
}
38+
return this.startDateOfMonth;
39+
};
40+
41+
this.setNoOfDays = function (i) {
42+
var d = parseInt(i || 0, 10);
43+
if (!isNaN(d) && d > 0 ) {
44+
this.noOfDays = d;
45+
} else {
46+
this.noOfDays = 0;
47+
}
48+
return this.noOfDays;
49+
};
50+
3151
this.options = angular.isObject(options) ? options : {};
3252
this.year = now.getFullYear();
3353
this.month = now.getMonth();
3454
this.weeks = [];
3555
this.weekStartsOn = this.setWeekStartsOn(this.options.weekStartsOn);
56+
this.startDateOfMonth = this.setStartDateOfMonth(this.options.startDateOfMonth);
57+
this.noOfDays = this.setNoOfDays(this.options.noOfDays);
3658

3759
this.next = function () {
3860
if (this.start.getMonth() < 11) {
@@ -68,11 +90,30 @@ angular.module("materialCalendar").service("materialCalendar.Calendar", [functio
6890
}
6991

7092
// First day of calendar month.
71-
this.start = new Date(this.year, this.month, 1);
93+
if ( angular.isDefined(this.options.startDateOfMonth) ) {
94+
this.start = new Date(this.year, this.month, this.startDateOfMonth);
95+
} else {
96+
this.start = new Date(this.year, this.month, 1);
97+
}
98+
7299
var date = angular.copy(this.start);
73-
while (date.getDay() !== this.weekStartsOn) {
74-
date.setDate(date.getDate() - 1);
75-
monthLength++;
100+
if ( date.getDate() === 1) {
101+
while ( date.getDay() !== this.weekStartsOn) {
102+
date.setDate(date.getDate() - 1);
103+
monthLength++;
104+
}
105+
}
106+
107+
if ( this.noOfDays !== 0) {
108+
while (this.noOfDays % 7 !== 0) {
109+
this.noOfDays++;
110+
}
111+
monthLength = this.noOfDays;
112+
} else {
113+
// Last day of calendar month.
114+
while (monthLength % 7 !== 0) {
115+
monthLength++;
116+
}
76117
}
77118

78119
// Last day of calendar month.
@@ -125,7 +166,7 @@ angular.module("materialCalendar").service("MaterialCalendarData", [function ()
125166

126167
angular.module("materialCalendar").directive("calendarMd", ["$compile", "$parse", "$templateRequest", "$q", "materialCalendar.Calendar", "MaterialCalendarData", function ($compile, $parse, $templateRequest, $q, Calendar, CalendarData) {
127168

128-
var defaultTemplate = "<md-content layout='column' layout-fill md-swipe-left='next()' md-swipe-right='prev()'><md-toolbar><div class='md-toolbar-tools' layout='row'><md-button class='md-icon-button' ng-click='prev()' aria-label='Previous month'><md-tooltip ng-if='::tooltips()'>Previous month</md-tooltip>&laquo;</md-button><div flex></div><h2 class='calendar-md-title'><span>{{ calendar.start | date:titleFormat:timezone }}</span></h2><div flex></div><md-button class='md-icon-button' ng-click='next()' aria-label='Next month'><md-tooltip ng-if='::tooltips()'>Next month</md-tooltip>&raquo;</md-button></div></md-toolbar><!-- agenda view --><md-content ng-if='weekLayout === columnWeekLayout' class='agenda'><div ng-repeat='week in calendar.weeks track by $index'><div ng-if='sameMonth(day)' ng-class='{&quot;disabled&quot; : isDisabled(day), active: active === day, currentDayHighlight : isCurrentDay(day) }' ng-click='handleDayClick(day)' ng-repeat='day in week' layout><md-tooltip ng-if='::tooltips()'>{{ day | date:dayTooltipFormat:timezone }}</md-tooltip><div>{{ day | date:dayFormat:timezone }}</div><div flex ng-bind-html='dataService.data[dayKey(day)]'></div></div></div></md-content><!-- calendar view --><md-content ng-if='weekLayout !== columnWeekLayout' flex layout='column' class='calendar'><div layout='row' class='subheader'><div layout-padding class='subheader-day' flex ng-repeat='day in calendar.weeks[0]'><md-tooltip ng-if='::tooltips()'>{{ day | date:dayLabelTooltipFormat }}</md-tooltip>{{ day | date:dayLabelFormat }}</div></div><div ng-if='week.length' ng-repeat='week in calendar.weeks track by $index' flex layout='row'><div tabindex='{{ sameMonth(day) ? (day | date:dayFormat:timezone) : 0 }}' ng-repeat='day in week track by $index' ng-click='handleDayClick(day)' flex layout layout-padding ng-class='{&quot;disabled&quot; : isDisabled(day), &quot;active&quot;: isActive(day), &quot;md-whiteframe-12dp&quot;: hover || focus }' ng-focus='focus = true;' ng-blur='focus = false;' ng-mouseleave='hover = false' ng-mouseenter='hover = true'><md-tooltip ng-if='::tooltips()'>{{ day | date:dayTooltipFormat }}</md-tooltip><div>{{ day | date:dayFormat }}</div><div flex ng-bind-html='dataService.data[dayKey(day)]'></div></div></div></md-content></md-content>";
169+
var defaultTemplate = "<md-content layout='column' layout-fill md-swipe-left='next()' md-swipe-right='prev()'><md-toolbar><div class='md-toolbar-tools' layout='row'><md-button class='md-icon-button' ng-click='prev()' aria-label='Previous month'><md-tooltip ng-if='::tooltips()'>Previous month</md-tooltip>&laquo;</md-button><div flex></div><h2 class='calendar-md-title'><span>{{ calendar.start | date:titleFormat:timezone }}</span></h2><div flex></div><md-button class='md-icon-button' ng-click='next()' aria-label='Next month'><md-tooltip ng-if='::tooltips()'>Next month</md-tooltip>&raquo;</md-button></div></md-toolbar><!-- agenda view --><md-content ng-if='weekLayout === columnWeekLayout' class='agenda'><div ng-repeat='week in calendar.weeks track by $index'><div ng-if='sameMonth(day)' ng-class='{&quot;disabled&quot; : isDisabled(day,startDateOfMonth,noOfDays), active: active === day, currentDayHighlight : isCurrentDay(day) }' ng-click='handleDayClick(day)' ng-repeat='day in week' layout><md-tooltip ng-if='::tooltips()'>{{ day | date:dayTooltipFormat:timezone }}</md-tooltip><div>{{ day | date:dayFormat:timezone }}</div><div flex ng-bind-html='dataService.data[dayKey(day)]'></div></div></div></md-content><!-- calendar view --><md-content ng-if='weekLayout !== columnWeekLayout' flex layout='column' class='calendar'><div layout='row' class='subheader'><div layout-padding class='subheader-day' flex ng-repeat='day in calendar.weeks[0]'><md-tooltip ng-if='::tooltips()'>{{ day | date:dayLabelTooltipFormat }}</md-tooltip>{{ day | date:dayLabelFormat }}</div></div><div ng-if='week.length' ng-repeat='week in calendar.weeks track by $index' flex layout='row'><div tabindex='{{ sameMonth(day) ? (day | date:dayFormat:timezone) : 0 }}' ng-repeat='day in week track by $index' ng-click='handleDayClick(day)' flex layout layout-padding ng-class='{&quot;disabled&quot; : isDisabled(day,startDateOfMonth,noOfDays), &quot;active&quot;: isActive(day), &quot;md-whiteframe-12dp&quot;: hover || focus }' ng-focus='focus = true;' ng-blur='focus = false;' ng-mouseleave='hover = false' ng-mouseenter='hover = true'><md-tooltip ng-if='::tooltips()'>{{ day | date:dayTooltipFormat }}</md-tooltip><div>{{ day | date:dayFormat }}</div><div flex ng-bind-html='dataService.data[dayKey(day)]'></div></div></div></md-content></md-content>";
129170

130171
var injectCss = function () {
131172
var styleId = "calendarMdCss";
@@ -158,6 +199,8 @@ angular.module("materialCalendar").directive("calendarMd", ["$compile", "$parse"
158199
dayTooltipFormat: "=?",
159200
weekStartsOn: "=?",
160201
tooltips: "&?",
202+
startDateOfMonth: "=?",
203+
noOfDays: "=?",
161204
clearDataCacheOnLoad: "=?",
162205
disableFutureSelection: "=?"
163206
},
@@ -203,7 +246,8 @@ angular.module("materialCalendar").directive("calendarMd", ["$compile", "$parse"
203246
d.getMonth() === $scope.calendar.month;
204247
};
205248

206-
$scope.isDisabled = function (date) {
249+
$scope.isDisabled = function (date,startDateOfMonth,noOfDays) {
250+
if (noOfDays!=0 && date.getDate() >= (startDateOfMonth+noOfDays)) {return true;}
207251
if ($scope.disableFutureSelection && date > new Date()) { return true; }
208252
return !$scope.sameMonth(date);
209253
};
@@ -314,7 +358,9 @@ angular.module("materialCalendar").directive("calendarMd", ["$compile", "$parse"
314358
var init = function () {
315359

316360
$scope.calendar = new Calendar(year, month, {
317-
weekStartsOn: $scope.weekStartsOn || 0
361+
weekStartsOn: $scope.weekStartsOn || 0,
362+
startDateOfMonth: $scope.startDateOfMonth || 1,
363+
noOfDays: $scope.noOfDays || 0
318364
});
319365

320366
// Allows fetching of dynamic templates via $templateCache.
@@ -378,7 +424,7 @@ angular.module("materialCalendar").directive("calendarMd", ["$compile", "$parse"
378424
});
379425
};
380426

381-
$scope.$watch("weekStartsOn", init);
427+
$scope.$watchGroup(["weekStartsOn","startDateOfMonth","noOfDays"], init);
382428
bootstrap();
383429

384430
// These are for tests, don't remove them..

‎src/angular-material-calendar.js

+53-7
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,33 @@ angular.module("materialCalendar").service("materialCalendar.Calendar", [functio
2828
return this.weekStartsOn;
2929
};
3030

31+
this.setStartDateOfMonth = function (i) {
32+
var d = parseInt(i || 1, 10);
33+
if (!isNaN(d) && d >= 1 && d <= 31) {
34+
this.startDateOfMonth = d;
35+
} else {
36+
this.startDateOfMonth = 1;
37+
}
38+
return this.startDateOfMonth;
39+
};
40+
41+
this.setNoOfDays = function (i) {
42+
var d = parseInt(i || 0, 10);
43+
if (!isNaN(d) && d > 0 ) {
44+
this.noOfDays = d;
45+
} else {
46+
this.noOfDays = 0;
47+
}
48+
return this.noOfDays;
49+
};
50+
3151
this.options = angular.isObject(options) ? options : {};
3252
this.year = now.getFullYear();
3353
this.month = now.getMonth();
3454
this.weeks = [];
3555
this.weekStartsOn = this.setWeekStartsOn(this.options.weekStartsOn);
56+
this.startDateOfMonth = this.setStartDateOfMonth(this.options.startDateOfMonth);
57+
this.noOfDays = this.setNoOfDays(this.options.noOfDays);
3658

3759
this.next = function () {
3860
if (this.start.getMonth() < 11) {
@@ -68,11 +90,30 @@ angular.module("materialCalendar").service("materialCalendar.Calendar", [functio
6890
}
6991

7092
// First day of calendar month.
71-
this.start = new Date(this.year, this.month, 1);
93+
if ( angular.isDefined(this.options.startDateOfMonth) ) {
94+
this.start = new Date(this.year, this.month, this.startDateOfMonth);
95+
} else {
96+
this.start = new Date(this.year, this.month, 1);
97+
}
98+
7299
var date = angular.copy(this.start);
73-
while (date.getDay() !== this.weekStartsOn) {
74-
date.setDate(date.getDate() - 1);
75-
monthLength++;
100+
if ( date.getDate() === 1) {
101+
while ( date.getDay() !== this.weekStartsOn) {
102+
date.setDate(date.getDate() - 1);
103+
monthLength++;
104+
}
105+
}
106+
107+
if ( this.noOfDays !== 0) {
108+
while (this.noOfDays % 7 !== 0) {
109+
this.noOfDays++;
110+
}
111+
monthLength = this.noOfDays;
112+
} else {
113+
// Last day of calendar month.
114+
while (monthLength % 7 !== 0) {
115+
monthLength++;
116+
}
76117
}
77118

78119
// Last day of calendar month.
@@ -158,6 +199,8 @@ angular.module("materialCalendar").directive("calendarMd", ["$compile", "$parse"
158199
dayTooltipFormat: "=?",
159200
weekStartsOn: "=?",
160201
tooltips: "&?",
202+
startDateOfMonth: "=?",
203+
noOfDays: "=?",
161204
clearDataCacheOnLoad: "=?",
162205
disableFutureSelection: "=?"
163206
},
@@ -203,7 +246,8 @@ angular.module("materialCalendar").directive("calendarMd", ["$compile", "$parse"
203246
d.getMonth() === $scope.calendar.month;
204247
};
205248

206-
$scope.isDisabled = function (date) {
249+
$scope.isDisabled = function (date,startDateOfMonth,noOfDays) {
250+
if (noOfDays!=0 && date.getDate() >= (startDateOfMonth+noOfDays)) {return true;}
207251
if ($scope.disableFutureSelection && date > new Date()) { return true; }
208252
return !$scope.sameMonth(date);
209253
};
@@ -309,7 +353,9 @@ angular.module("materialCalendar").directive("calendarMd", ["$compile", "$parse"
309353
var init = function () {
310354

311355
$scope.calendar = new Calendar(year, month, {
312-
weekStartsOn: $scope.weekStartsOn || 0
356+
weekStartsOn: $scope.weekStartsOn || 0,
357+
startDateOfMonth: $scope.startDateOfMonth || 1,
358+
noOfDays: $scope.noOfDays || 0
313359
});
314360

315361
// Allows fetching of dynamic templates via $templateCache.
@@ -373,7 +419,7 @@ angular.module("materialCalendar").directive("calendarMd", ["$compile", "$parse"
373419
});
374420
};
375421

376-
$scope.$watch("weekStartsOn", init);
422+
$scope.$watchGroup(["weekStartsOn","startDateOfMonth","noOfDays"], init);
377423
bootstrap();
378424

379425
// These are for tests, don't remove them..

‎website/index.html

+2
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,8 @@ <h3 class="mdl-typeography--display-1" id="demo">Demo</h3>
9090
day-label-tooltip-format="'EEEE'"
9191
day-tooltip-format="'fullDate'"
9292
week-starts-on="weekStartsOn"
93+
start-Date-of-month="1"
94+
no-of-days="30"
9395
tooltips="true"
9496
day-content="setDayContent"
9597
disable-future-selection="disableFutureDates"></calendar-md>

0 commit comments

Comments
 (0)