Skip to content
This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

feat(customTemplates): allow a parent scope to be accessed in custom …

…templates

Closes #415
  • Loading branch information...
Matt Lewis
Matt Lewis committed Aug 10, 2016
1 parent 28354e6 commit c84e9abc80df39292bd46bd8abec9882e9136be6
@@ -210,6 +210,9 @@ $templateCache.put('my-custom-template.html', 'Custom month view template here')
<mwl-calendar custom-template-urls="{calendarMonthView: 'my-custom-template.html'}"></mwl-calendar>
```

### 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:
@@ -150,7 +150,8 @@ angular
dayViewStart: '@',
dayViewEnd: '@',
dayViewSplit: '@',
dayViewEventChunkSize: '@'
dayViewEventChunkSize: '@',
templateScope: '=?'
},
controller: 'MwlCalendarCtrl as vm',
bindToController: true
@@ -106,7 +106,8 @@ angular
editEventHtml: '=',
deleteEventHtml: '=',
customTemplateUrls: '=?',
cellModifier: '='
cellModifier: '=',
templateScope: '='
},
controller: 'MwlCalendarDayCtrl as vm',
bindToController: true
@@ -112,7 +112,8 @@ angular
onDateRangeSelect: '=',
onEventTimesChanged: '=',
customTemplateUrls: '=?',
cellModifier: '='
cellModifier: '=',
templateScope: '='
},
bindToController: true
};
@@ -147,7 +147,8 @@ angular
onTimespanClick: '=',
cellModifier: '=',
slideBoxDisabled: '=',
customTemplateUrls: '=?'
customTemplateUrls: '=?',
templateScope: '='
},
controller: 'MwlCalendarMonthCtrl as vm',
link: function(scope, element, attrs, calendarCtrl) {
@@ -40,7 +40,8 @@ angular
deleteEventHtml: '=',
onDeleteEventClick: '=',
cell: '=',
customTemplateUrls: '=?'
customTemplateUrls: '=?',
templateScope: '='
},
bindToController: true
};
@@ -98,7 +98,8 @@ angular
onTimespanClick: '=',
onDateRangeSelect: '=',
customTemplateUrls: '=?',
cellModifier: '='
cellModifier: '=',
templateScope: '='
},
controller: 'MwlCalendarWeekCtrl as vm',
link: function(scope, element, attrs, calendarCtrl) {
@@ -84,7 +84,8 @@ angular
onTimespanClick: '=',
cellModifier: '=',
slideBoxDisabled: '=',
customTemplateUrls: '=?'
customTemplateUrls: '=?',
templateScope: '='
},
controller: 'MwlCalendarYearCtrl as vm',
link: function(scope, element, attrs, calendarCtrl) {
@@ -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">
</mwl-calendar-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">
</mwl-calendar-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">
</mwl-calendar-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">
</mwl-calendar-day>
</div>
@@ -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">
</mwl-calendar-hour-list>

@@ -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">
</mwl-calendar-slide-box>

</div>
@@ -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">
</mwl-calendar-hour-list>

@@ -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">
</mwl-calendar-slide-box>

</div>
@@ -12,6 +12,7 @@ describe('mwlCalendarMonth directive', function() {
showModal,
calendarHelper,
calendarConfig,
$templateCache,
template =
'<mwl-calendar-month ' +
'events="events" ' +
@@ -25,6 +26,8 @@ describe('mwlCalendarMonth directive', function() {
'day-view-split="dayViewSplit || 30" ' +
'cell-template-url="{{ monthCellTemplateUrl }}" ' +
'cell-events-template-url="{{ monthCellEventsTemplateUrl }}" ' +
'template-scope="templateScope"' +
'custom-template-urls="customTemplateUrls"' +
'></mwl-calendar-month>';
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');
});

});

7 comments on commit c84e9ab

@h44z

This comment has been minimized.

Copy link

h44z replied Aug 10, 2016

Hi, a short question to this enhancement:

should it be enough to specify the calendar as follows:

<body ng-app="timeKeeper" ng-controller="TimeController as vmTimeCtl">
<mwl-calendar
      events="vmTimeCtl.events"
      view="vmTimeCtl.calendarView"
      view-title="vmTimeCtl.calendarTitle"
      view-date="vmTimeCtl.viewDate"
      on-event-click="vmTimeCtl.eventClicked(calendarEvent)"
      on-event-times-changed="vmTimeCtl.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
      cell-is-open="vmTimeCtl.isCellOpen"
      day-view-start="06:00"
      day-view-end="22:59"
      day-view-split="30"
      cell-modifier="vmTimeCtl.modifyCell(calendarCell)"
      template-scope="{parentCtl: vmTimeCtl}">
</mwl-calendar>
</body>

so that I can access the parent controller via vm.templateScope.parentCtl ?

I have specified the template like this:

calendarConfig.templates.calendarSlideBox = 'tpl/calendarSlideBox.html';

Thanks for your great work!

@mattlewis92

This comment has been minimized.

Copy link
Owner

mattlewis92 replied Aug 11, 2016

Yup that's correct! 😄

@h44z

This comment has been minimized.

Copy link

h44z replied Aug 11, 2016

Hm, tested this, but neither vm.templateScope.parentCtl nor vm.templateScope are set in the template... using the latest master branch, implemented as stated above.

@mattlewis92

This comment has been minimized.

Copy link
Owner

mattlewis92 replied Aug 11, 2016

Have you re-built the dist files?

@h44z

This comment has been minimized.

Copy link

h44z replied Aug 11, 2016

Hah! I forgot to do this...

Works fine after rebuilding the dist files!
Thanks a lot! :)

@mattlewis92

This comment has been minimized.

Copy link
Owner

mattlewis92 replied Aug 11, 2016

@albertomarley94

This comment has been minimized.

Copy link

albertomarley94 replied May 24, 2017

Hi, thanks for make this amazing library, i have a problem sending the parent controller to my custom template, two of them are in the same document, could you help me please?

 <div ng-app="mwl.calendar.docs" ng-controller="CalendarSlots as vm"  >
 <script id="customMonthCell.html" type="text/ng-template">
            <div ng-controller="vm">
                        Test
            </div>

</script>
<mwl-calendar
            events="vm.events"
            view="vm.calendarView"
            view-title="vm.calendarTitle"
            view-date="vm.viewDate"
            custom-template-urls="{calendarMonthCell: 'customMonthCell.html'}"
            template-scope="{parentCtl: vm}"
            cell-is-open="vm.cellIsOpen"
            day-view-start="06:00"
            day-view-end="22:59"
            day-view-split="30"
            cell-modifier="vm.modifyCell(calendarCell)"
            cell-auto-open-disabled="true"
            on-event-click="vm.toggleModal(calendarEvent)">
        </mwl-calendar>

</div>
Please sign in to comment.
You can’t perform that action at this time.