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'); + }); + });