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

feat(calendarConfig): change the calendarConfig provider to a plain o…

…bject. Part of #236

BREAKING CHANGE:
`calendarConfig` is now just a plain angular value. The helper methods were removed and now you directly set the properties on a plain object.

Before:
```
.config(function(calendarConfigProvider) {
  calendarConfigProvider.setDateFormatter('moment');
});
```

After:
```
.config(function(calendarConfig) {
  calendarConfig.dateFormatter = 'moment';
});
```
  • Loading branch information...
Matt Lewis
Matt Lewis committed Dec 30, 2015
1 parent c44a50e commit 0eb50e019696e0bff97f8c769f41efc9f8754856
Showing with 30 additions and 160 deletions.
  1. +15 −18 README.md
  2. +15 −69 src/services/calendarConfig.js
  3. +0 −73 test/unit/services/calendarConfig.spec.js
@@ -135,7 +135,7 @@ $scope.events = [

### view-title

This variable will be assigned to the calendar title. If you want to change the formatting you can use the `calendarConfigProvider` or just override the appropriate method in the `calendarTitle` factory.
This variable will be assigned to the calendar title. If you want to change the formatting you can use the `calendarConfig` or just override the appropriate method in the `calendarTitle` factory.

### on-event-click

@@ -250,9 +250,9 @@ You can either use angular's date filter or moment.js to format dates. The defau

```javascript
angular.module('myModule')
.config(function(calendarConfigProvider) {
.config(function(calendarConfig) {
calendarConfigProvider.setDateFormatter('moment'); // use moment to format dates
calendarConfig.dateFormatter = 'moment'; // use moment to format dates
});
```
@@ -274,30 +274,27 @@ moment.locale('en', {

## Configuring date formats

You can easily customise the date formats and i18n strings used throughout the calendar by using the `calendarConfigProvider`. 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:
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(calendarConfigProvider) {
.config(function(calendarConfig) {
calendarConfigProvider.setDateFormatter('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.
console.log(calendarConfig); //view all available config
calendarConfigProvider.setDateFormats({
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.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
calendarConfigProvider.setTitleFormats({
day: 'ddd D MMM' //this will configure the day view title to be shorter
});
calendarConfig.allDateFormats.moment.title = 'ddd D MMM'; //this will configure the day view title to be shorter
calendarConfigProvider.setI18nStrings({
eventsLabel: 'Events', //This will set the events label on the day view
timeLabel: 'Time' //This will set the time label on the time view
});
calendarConfig.i18nStrings.eventsLabel = 'Events'; //This will set the events label on the day view
calendarConfigProvider.setDisplayAllMonthEvents(true); //This will display all events on a month view even if they're not in the current month. Default false.
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.
calendarConfigProvider.setDisplayEventEndTimes(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.
});
```
@@ -4,9 +4,8 @@ var angular = require('angular');

angular
.module('mwl.calendar')
.provider('calendarConfig', function() {

var defaultFormats = {
.value('calendarConfig', {
allDateFormats: {
angular: {
date: {
hour: 'ha',
@@ -39,73 +38,20 @@ angular
year: 'YYYY'
}
}
};

var dateFormatter = 'angular';
var defaultDateFormats = angular.copy(defaultFormats[dateFormatter].date);
var defaultTitleFormats = angular.copy(defaultFormats[dateFormatter].title);
var displayEventEndTimes = false;
var showTimesOnWeekView = false;
var displayAllMonthEvents = false;

var i18nStrings = {
},
get dateFormats() {
return this.allDateFormats[this.dateFormatter].date;
},
get titleFormats() {
return this.allDateFormats[this.dateFormatter].title;
},
dateFormatter: 'angular',
displayEventEndTimes: false,
showTimesOnWeekView: false,
displayAllMonthEvents: false,
i18nStrings: {
eventsLabel: 'Events',
timeLabel: 'Time',
weekNumber: 'Week {week}'
};

var configProvider = this;

configProvider.setDateFormats = function(formats) {
angular.extend(defaultDateFormats, formats);
return configProvider;
};

configProvider.setTitleFormats = function(formats) {
angular.extend(defaultTitleFormats, formats);
return configProvider;
};

configProvider.setI18nStrings = function(strings) {
angular.extend(i18nStrings, strings);
return configProvider;
};

configProvider.setDisplayAllMonthEvents = function(value) {
displayAllMonthEvents = value;
return configProvider;
};

configProvider.setDisplayEventEndTimes = function(value) {
displayEventEndTimes = value;
return configProvider;
};

configProvider.setDateFormatter = function(value) {
if (['angular', 'moment'].indexOf(value) === -1) {
throw new Error('Invalid date formatter. Allowed types are angular and moment.');
}
dateFormatter = value;
defaultDateFormats = angular.copy(defaultFormats[dateFormatter].date);
defaultTitleFormats = angular.copy(defaultFormats[dateFormatter].title);
return configProvider;
};

configProvider.showTimesOnWeekView = function(value) {
showTimesOnWeekView = value; //experimental, and ignores the event end date
return configProvider;
};

configProvider.$get = function() {
return {
dateFormats: defaultDateFormats,
titleFormats: defaultTitleFormats,
i18nStrings: i18nStrings,
displayAllMonthEvents: displayAllMonthEvents,
displayEventEndTimes: displayEventEndTimes,
dateFormatter: dateFormatter,
showTimesOnWeekView: showTimesOnWeekView
};
};

}
});

This file was deleted.

Oops, something went wrong.

0 comments on commit 0eb50e0

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