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

feat(templates): make all templates configurable from the calendarConfig

Closes #236

BREAKING CHANGE:
`month-cell-template-url` and `month-cell-events-template-url` options have been removed in favour of the calendarConfig.

To migrate:

```
angular.module('myModule')
  .config(function(calendarConfig) {
    calendarConfig.templates.calendarMonthCell = '/path/to/custom/template.html';
    calendarConfig.templates.calendarMonthCellEvents = '/path/to/custom/template.html';
  });
```
  • Loading branch information...
Matt Lewis
Matt Lewis committed Dec 31, 2015
1 parent 0eb50e0 commit 8fc02fe6cd557613c8c15e1f36719b99bf5f6ae9
@@ -189,30 +189,38 @@ An optional expression that is evaluated when the view is changed by clicking on

An optional expression that is evaluated on each cell generated for the year and month views. `calendarCell` can be used in the expression and is an object containing the current cell data which you can modify (see the `calendarHelper` service source code or just console.log it to see what data is available). If you add the `cssClass` property it will be applied to the cell.

### month-cell-template-url
## Configuring the calendar default config

An interpolated string template url that can be used to override the default month cell template.
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:

### month-cell-events-template-url
```javascript
angular.module('myModule')
.config(function(calendarConfig) {
An interpolated string template url that can be used to override the default month cell events.
console.log(calendarConfig); //view all available config
## Custom directive templates
calendarConfig.templates.calendarMonthView = 'path/to/custom/template.html'; //change the month view template to a custom template
All templates apart from the month cell templates are linked to directives so you can change any template and use your own using a decorator like so:
```
//This will change the slide box directive template to one of your choosing
app.config(['$provide', function($provide) {
$provide.decorator('mwlCalendarSlideBoxDirective', ['$delegate', function($delegate) {
var directive = $delegate[0];
delete directive.template; //the calendar uses template instead of template-url so you need to delete this
directive.templateUrl = 'path/to/my/slide/box/template.html';
return $delegate;
}]);
}]);
calendarConfig.dateFormatter = 'moment'; //use either moment or angular to format dates on the calendar. Default angular. Setting this will override any date formats you have already set.
calendarConfig.allDateFormats.moment.date.hour = 'HH:mm'; //this will configure times on the day view to display in 24 hour format rather than the default of 12 hour
calendarConfig.allDateFormats.moment.title = 'ddd D MMM'; //this will configure the day view title to be shorter
calendarConfig.i18nStrings.eventsLabel = 'Events'; //This will set the events label on the day view
calendarConfig.displayAllMonthEvents = true; //This will display all events on a month view even if they're not in the current month. Default false.
calendarConfig.displayEventEndTimes = true; //This will display event end times on the month and year views. Default false.
calendarConfig.showTimesOnWeekView = true; //Make the week view more like the day view, with the caveat that event end times are ignored.
});
```

For more info on using decorators see this [great guide](http://angular-tips.com/blog/2013/09/experiment-decorating-directives/).
## Custom directive templates

All calendar template urls can be changed using the `calendarConfig` as illustrated above.

## The mwl-date-modifier directive

@@ -272,33 +280,6 @@ moment.locale('en', {
});
```

## Configuring date formats

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:

```javascript
angular.module('myModule')
.config(function(calendarConfig) {
console.log(calendarConfig); //view all available config
calendarConfig.dateFormatter = 'moment'; //use either moment or angular to format dates on the calendar. Default angular. Setting this will override any date formats you have already set.
calendarConfig.allDateFormats.moment.date.hour = 'HH:mm'; //this will configure times on the day view to display in 24 hour format rather than the default of 12 hour
calendarConfig.allDateFormats.moment.title = 'ddd D MMM'; //this will configure the day view title to be shorter
calendarConfig.i18nStrings.eventsLabel = 'Events'; //This will set the events label on the day view
calendarConfig.displayAllMonthEvents = true; //This will display all events on a month view even if they're not in the current month. Default false.
calendarConfig.displayEventEndTimes = true; //This will display event end times on the month and year views. Default false.
calendarConfig.showTimesOnWeekView = true; //Make the week view more like the day view, with the caveat that event end times are ignored.
});
```

For a full list of all available formats and their defaults see [calendarConfig.js](https://github.com/mattlewis92/angular-bootstrap-calendar/blob/master/src/services/calendarConfig.js)

## Demo
@@ -20,6 +20,10 @@ var webpackConfig = {
test: /\.html$/,
loader: 'html',
exclude: /node_modules/
}, {
test: /\.less/,
loader: 'null',
exclude: /node_modules/
}],
postLoaders: [{
test: /\.js$/,
@@ -36,6 +36,7 @@
"moment": "^2.10.6",
"ng-annotate-loader": "0.0.10",
"node-libs-browser": "~0.5.2",
"null-loader": "~0.1.1",
"phantomjs": "~1.9.17",
"pre-git": "~3.1.1",
"style-loader": "~0.13.0",
@@ -108,10 +108,10 @@ angular
});

})
.directive('mwlCalendar', function(calendarUseTemplates) {
.directive('mwlCalendar', function(calendarConfig) {

return {
template: calendarUseTemplates ? require('./../templates/calendar.html') : '',
templateUrl: calendarConfig.templates.calendar,
restrict: 'EA',
scope: {
events: '=',
@@ -130,9 +130,7 @@ angular
cellModifier: '&',
dayViewStart: '@',
dayViewEnd: '@',
dayViewSplit: '@',
monthCellTemplateUrl: '@',
monthCellEventsTemplateUrl: '@'
dayViewSplit: '@'
},
controller: 'MwlCalendarCtrl as vm',
bindToController: true
@@ -73,10 +73,10 @@ angular
};

})
.directive('mwlCalendarDay', function(calendarUseTemplates) {
.directive('mwlCalendarDay', function(calendarConfig) {

return {
template: calendarUseTemplates ? require('./../templates/calendarDayView.html') : '',
templateUrl: calendarConfig.templates.calendarDayView,
restrict: 'EA',
require: '^mwlCalendar',
scope: {
@@ -48,11 +48,11 @@ angular
});

})
.directive('mwlCalendarHourList', function(calendarUseTemplates) {
.directive('mwlCalendarHourList', function(calendarConfig) {

return {
restrict: 'EA',
template: calendarUseTemplates ? require('./../templates/calendarHourList.html') : '',
templateUrl: calendarConfig.templates.calendarHourList,
controller: 'MwlCalendarHourListCtrl as vm',
scope: {
viewDate: '=',
@@ -89,10 +89,10 @@ angular
};

})
.directive('mwlCalendarMonth', function(calendarUseTemplates) {
.directive('mwlCalendarMonth', function(calendarConfig) {

return {
template: calendarUseTemplates ? require('./../templates/calendarMonthView.html') : '',
templateUrl: calendarConfig.templates.calendarMonthView,
restrict: 'EA',
require: '^mwlCalendar',
scope: {
@@ -106,9 +106,7 @@ angular
deleteEventHtml: '=',
cellIsOpen: '=',
onTimespanClick: '=',
cellModifier: '=',
cellTemplateUrl: '@',
cellEventsTemplateUrl: '@'
cellModifier: '='
},
controller: 'MwlCalendarMonthCtrl as vm',
link: function(scope, element, attrs, calendarCtrl) {
@@ -19,11 +19,11 @@ angular
});

})
.directive('mwlCalendarSlideBox', function(calendarUseTemplates) {
.directive('mwlCalendarSlideBox', function(calendarConfig) {

return {
restrict: 'EA',
template: calendarUseTemplates ? require('./../templates/calendarSlideBox.html') : '',
templateUrl: calendarConfig.templates.calendarSlideBox,
replace: true,
controller: 'MwlCalendarSlideBoxCtrl as vm',
require: ['^?mwlCalendarMonth', '^?mwlCalendarYear'],
@@ -75,10 +75,10 @@ angular
};

})
.directive('mwlCalendarWeek', function(calendarUseTemplates) {
.directive('mwlCalendarWeek', function(calendarConfig) {

return {
template: calendarUseTemplates ? require('./../templates/calendarWeekView.html') : '',
templateUrl: calendarConfig.templates.calendarWeekView,
restrict: 'EA',
require: '^mwlCalendar',
scope: {
@@ -62,10 +62,10 @@ angular
};

})
.directive('mwlCalendarYear', function(calendarUseTemplates) {
.directive('mwlCalendarYear', function(calendarConfig) {

return {
template: calendarUseTemplates ? require('./../templates/calendarYearView.html') : '',
templateUrl: calendarConfig.templates.calendarYearView,
restrict: 'EA',
require: '^mwlCalendar',
scope: {
@@ -2,4 +2,33 @@

require('./less/calendar.less');

module.exports = require('./module');
var angular = require('angular');

function requireAll(r) {
r.keys().forEach(r);
}

module.exports = angular
.module('mwl.calendar', [])
.run(function($templateCache, calendarConfig) {

if (EXCLUDE_TEMPLATES === false) {

var templatesContext = require.context('./templates', false, /\.html/);

templatesContext.keys().forEach(function(templateName) {
var templateNameWithoutPrefix = templateName.replace('./', '');
var cacheTemplateName = 'mwl/' + templateNameWithoutPrefix;
if (!$templateCache.get(cacheTemplateName)) {
$templateCache.put(cacheTemplateName, templatesContext(templateName));
calendarConfig.templates[templateNameWithoutPrefix.replace('.html', '')] = cacheTemplateName;
}
});

}

}).name;

requireAll(require.context('./directives', true, /\.js$/));
requireAll(require.context('./filters', true, /\.js$/));
requireAll(require.context('./services', true, /\.js$/));

This file was deleted.

Oops, something went wrong.
@@ -53,5 +53,6 @@ angular
eventsLabel: 'Events',
timeLabel: 'Time',
weekNumber: 'Week {week}'
}
},
templates: {}
});
@@ -31,8 +31,6 @@
delete-event-html="vm.deleteEventHtml"
cell-is-open="vm.cellIsOpen"
cell-modifier="vm.cellModifier"
cell-template-url="{{ vm.monthCellTemplateUrl }}"
cell-events-template-url="{{ vm.monthCellEventsTemplateUrl }}"
ng-switch-when="month"
></mwl-calendar-month>

@@ -29,7 +29,7 @@
<i class="fa fa-chevron-up"></i>
</div>

<ng-include src="vm.cellEventsTemplateUrl || 'calendarMonthCellEvents.html'"></ng-include>
<ng-include src="vm.calendarConfig.templates.calendarMonthCellEvents"></ng-include>

<div id="cal-week-box" ng-if="$first && rowHovered">
{{ vm.calendarConfig.i18nStrings.weekNumber.replace('{week}', day.date.week()) }}
@@ -16,7 +16,7 @@
class="cal-cell1 cal-cell {{ day.highlightClass }}"
ng-click="vm.dayClicked(day, false, $event)"
ng-class="{pointer: day.events.length > 0}">
<ng-include src="vm.cellTemplateUrl || 'calendarMonthCell.html'"></ng-include>
<ng-include src="vm.calendarConfig.templates.calendarMonthCell"></ng-include>
</div>
</div>

@@ -11,7 +11,6 @@ describe('mwlCalendarMonth directive', function() {
directiveScope,
showModal,
calendarHelper,
$templateCache,
template =
'<mwl-calendar-month ' +
'events="events" ' +
@@ -81,9 +80,8 @@ describe('mwlCalendarMonth directive', function() {

beforeEach(angular.mock.module('mwl.calendar'));

beforeEach(angular.mock.inject(function($compile, _$rootScope_, _calendarHelper_, _$templateCache_) {
beforeEach(angular.mock.inject(function($compile, _$rootScope_, _calendarHelper_) {
$rootScope = _$rootScope_;
$templateCache = _$templateCache_;
calendarHelper = _calendarHelper_;
scope = $rootScope.$new();
prepareScope(scope);
@@ -176,24 +174,4 @@ describe('mwlCalendarMonth directive', function() {
});
});

it('should use a custom cell url', function() {
var templatePath = 'customMonthCell.html';
$templateCache.put(templatePath, '<my-custom-cell>Hello world!</my-custom-cell>');
scope.monthCellTemplateUrl = templatePath;
MwlCalendarCtrl.cellModifier = angular.noop;
scope.$broadcast('calendar.refreshView');
scope.$apply();
expect(element.find('my-custom-cell').length).to.be.at.least(1);
});

it('should use a custom cell events url', function() {
var templatePath = 'customMonthCellEvents.html';
$templateCache.put(templatePath, '<my-custom-events>Hello world!</my-custom-events>');
scope.monthCellEventsTemplateUrl = templatePath;
MwlCalendarCtrl.cellModifier = angular.noop;
scope.$broadcast('calendar.refreshView');
scope.$apply();
expect(element.find('my-custom-events').length).to.be.at.least(1);
});

});
@@ -1,7 +1,7 @@
'use strict';
require('angular');
require('angular-mocks');
require('../../src/module');
require('../../src/entry');

var testsContext = require.context('.', true, /\.spec/);
testsContext.keys().forEach(testsContext);

0 comments on commit 8fc02fe

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