diff --git a/README.md b/README.md
index df555129..7f637e90 100644
--- a/README.md
+++ b/README.md
@@ -210,6 +210,9 @@ $templateCache.put('my-custom-template.html', 'Custom month view template here')
```
+### template-scope
+An object containing a set of variables that will be available in a custom template as `vm.templateScope`
+
## Configuring the calendar default config
You can easily customise the date formats and i18n strings used throughout the calendar by using the `calendarConfig` value. Please note that these example formats are those used by moment.js and these won't work if using angular as the date formatter. Example usage:
diff --git a/src/directives/mwlCalendar.js b/src/directives/mwlCalendar.js
index 86badc94..5218f2d7 100644
--- a/src/directives/mwlCalendar.js
+++ b/src/directives/mwlCalendar.js
@@ -150,7 +150,8 @@ angular
dayViewStart: '@',
dayViewEnd: '@',
dayViewSplit: '@',
- dayViewEventChunkSize: '@'
+ dayViewEventChunkSize: '@',
+ templateScope: '=?'
},
controller: 'MwlCalendarCtrl as vm',
bindToController: true
diff --git a/src/directives/mwlCalendarDay.js b/src/directives/mwlCalendarDay.js
index c712483d..53bc9664 100644
--- a/src/directives/mwlCalendarDay.js
+++ b/src/directives/mwlCalendarDay.js
@@ -106,7 +106,8 @@ angular
editEventHtml: '=',
deleteEventHtml: '=',
customTemplateUrls: '=?',
- cellModifier: '='
+ cellModifier: '=',
+ templateScope: '='
},
controller: 'MwlCalendarDayCtrl as vm',
bindToController: true
diff --git a/src/directives/mwlCalendarHourList.js b/src/directives/mwlCalendarHourList.js
index a3658a98..9be69675 100644
--- a/src/directives/mwlCalendarHourList.js
+++ b/src/directives/mwlCalendarHourList.js
@@ -112,7 +112,8 @@ angular
onDateRangeSelect: '=',
onEventTimesChanged: '=',
customTemplateUrls: '=?',
- cellModifier: '='
+ cellModifier: '=',
+ templateScope: '='
},
bindToController: true
};
diff --git a/src/directives/mwlCalendarMonth.js b/src/directives/mwlCalendarMonth.js
index f1846913..fc6fa99a 100644
--- a/src/directives/mwlCalendarMonth.js
+++ b/src/directives/mwlCalendarMonth.js
@@ -147,7 +147,8 @@ angular
onTimespanClick: '=',
cellModifier: '=',
slideBoxDisabled: '=',
- customTemplateUrls: '=?'
+ customTemplateUrls: '=?',
+ templateScope: '='
},
controller: 'MwlCalendarMonthCtrl as vm',
link: function(scope, element, attrs, calendarCtrl) {
diff --git a/src/directives/mwlCalendarSlideBox.js b/src/directives/mwlCalendarSlideBox.js
index fcca8a9f..2be69932 100644
--- a/src/directives/mwlCalendarSlideBox.js
+++ b/src/directives/mwlCalendarSlideBox.js
@@ -40,7 +40,8 @@ angular
deleteEventHtml: '=',
onDeleteEventClick: '=',
cell: '=',
- customTemplateUrls: '=?'
+ customTemplateUrls: '=?',
+ templateScope: '='
},
bindToController: true
};
diff --git a/src/directives/mwlCalendarWeek.js b/src/directives/mwlCalendarWeek.js
index 94d1fdd4..823c66ec 100644
--- a/src/directives/mwlCalendarWeek.js
+++ b/src/directives/mwlCalendarWeek.js
@@ -98,7 +98,8 @@ angular
onTimespanClick: '=',
onDateRangeSelect: '=',
customTemplateUrls: '=?',
- cellModifier: '='
+ cellModifier: '=',
+ templateScope: '='
},
controller: 'MwlCalendarWeekCtrl as vm',
link: function(scope, element, attrs, calendarCtrl) {
diff --git a/src/directives/mwlCalendarYear.js b/src/directives/mwlCalendarYear.js
index 0d620292..7140a7aa 100644
--- a/src/directives/mwlCalendarYear.js
+++ b/src/directives/mwlCalendarYear.js
@@ -84,7 +84,8 @@ angular
onTimespanClick: '=',
cellModifier: '=',
slideBoxDisabled: '=',
- customTemplateUrls: '=?'
+ customTemplateUrls: '=?',
+ templateScope: '='
},
controller: 'MwlCalendarYearCtrl as vm',
link: function(scope, element, attrs, calendarCtrl) {
diff --git a/src/templates/calendar.html b/src/templates/calendar.html
index f257c0e3..26ac6239 100644
--- a/src/templates/calendar.html
+++ b/src/templates/calendar.html
@@ -21,6 +21,7 @@
cell-modifier="vm.cellModifier"
slide-box-disabled="vm.slideBoxDisabled"
custom-template-urls="vm.customTemplateUrls"
+ template-scope="vm.templateScope"
ng-switch-when="year">
@@ -39,6 +40,7 @@
cell-modifier="vm.cellModifier"
slide-box-disabled="vm.slideBoxDisabled"
custom-template-urls="vm.customTemplateUrls"
+ template-scope="vm.templateScope"
ng-switch-when="month">
@@ -55,6 +57,7 @@
on-date-range-select="vm.onDateRangeSelect"
custom-template-urls="vm.customTemplateUrls"
cell-modifier="vm.cellModifier"
+ template-scope="vm.templateScope"
ng-switch-when="week">
@@ -75,6 +78,7 @@
delete-event-html="vm.deleteEventHtml"
custom-template-urls="vm.customTemplateUrls"
cell-modifier="vm.cellModifier"
+ template-scope="vm.templateScope"
ng-switch-when="day">
diff --git a/src/templates/calendarDayView.html b/src/templates/calendarDayView.html
index cdee97e7..228718d4 100644
--- a/src/templates/calendarDayView.html
+++ b/src/templates/calendarDayView.html
@@ -38,6 +38,7 @@
on-event-times-changed="vm.onEventTimesChanged"
view-date="vm.viewDate"
custom-template-urls="vm.customTemplateUrls"
+ template-scope="vm.templateScope"
cell-modifier="vm.cellModifier">
diff --git a/src/templates/calendarMonthView.html b/src/templates/calendarMonthView.html
index fb399dc8..66d5e0c6 100644
--- a/src/templates/calendarMonthView.html
+++ b/src/templates/calendarMonthView.html
@@ -30,7 +30,8 @@
delete-event-html="vm.deleteEventHtml"
on-delete-event-click="vm.onDeleteEventClick"
cell="vm.view[vm.openDayIndex]"
- custom-template-urls="vm.customTemplateUrls">
+ custom-template-urls="vm.customTemplateUrls"
+ template-scope="vm.templateScope">
diff --git a/src/templates/calendarWeekView.html b/src/templates/calendarWeekView.html
index d7bfef2d..a7dc3c9c 100644
--- a/src/templates/calendarWeekView.html
+++ b/src/templates/calendarWeekView.html
@@ -40,6 +40,7 @@
on-date-range-select="vm.onDateRangeSelect"
custom-template-urls="vm.customTemplateUrls"
cell-modifier="vm.cellModifier"
+ template-scope="vm.templateScope"
ng-if="vm.showTimes">
diff --git a/src/templates/calendarYearView.html b/src/templates/calendarYearView.html
index 66de9003..24a7ccf5 100644
--- a/src/templates/calendarYearView.html
+++ b/src/templates/calendarYearView.html
@@ -42,7 +42,8 @@
delete-event-html="vm.deleteEventHtml"
on-delete-event-click="vm.onDeleteEventClick"
cell="vm.view[vm.openMonthIndex]"
- custom-template-urls="vm.customTemplateUrls">
+ custom-template-urls="vm.customTemplateUrls"
+ template-scope="vm.templateScope">
diff --git a/test/unit/directives/mwlCalendarMonth.spec.js b/test/unit/directives/mwlCalendarMonth.spec.js
index 35ca36df..28402b17 100644
--- a/test/unit/directives/mwlCalendarMonth.spec.js
+++ b/test/unit/directives/mwlCalendarMonth.spec.js
@@ -12,6 +12,7 @@ describe('mwlCalendarMonth directive', function() {
showModal,
calendarHelper,
calendarConfig,
+ $templateCache,
template =
'';
var calendarDay = new Date(2015, 4, 1);
@@ -81,10 +84,11 @@ describe('mwlCalendarMonth directive', function() {
beforeEach(angular.mock.module('mwl.calendar'));
- beforeEach(angular.mock.inject(function($compile, _$rootScope_, _calendarHelper_, _calendarConfig_) {
+ beforeEach(angular.mock.inject(function($compile, _$rootScope_, _calendarHelper_, _calendarConfig_, _$templateCache_) {
$rootScope = _$rootScope_;
calendarHelper = _calendarHelper_;
calendarConfig = _calendarConfig_;
+ $templateCache = _$templateCache_;
scope = $rootScope.$new();
prepareScope(scope);
element = angular.element(template);
@@ -282,4 +286,14 @@ describe('mwlCalendarMonth directive', function() {
expect(MwlCalendarCtrl.dateRangeSelect).to.be.undefined;
});
+ it('should pass in a scope object that is accessible from the custom template', function() {
+ scope.templateScope = {
+ foo: 'world'
+ };
+ $templateCache.put('customMonth.html', 'Hello {{ vm.templateScope.foo }}');
+ scope.customTemplateUrls = {calendarMonthView: 'customMonth.html'};
+ scope.$apply();
+ expect(element.text()).to.deep.equal('Hello world');
+ });
+
});