projects/angular-calendar/src/modules/common/calendar-date-formatter/calendar-date-formatter.provider.ts
This class is responsible for all formatting of dates. There are 3 implementations available, the CalendarAngularDateFormatter
(default) which uses the angular date pipe to format dates, the CalendarNativeDateFormatter
which will use the Intl API to format dates, or there is the CalendarMomentDateFormatter
which uses moment.
If you wish, you may override any of the defaults via angulars DI. For example:
import { CalendarDateFormatter, DateFormatterParams } from 'angular-calendar';
import { formatDate } from '@angular/common';
import { Injectable } from '@angular/core';
@Injectable()
class CustomDateFormatter extends CalendarDateFormatter {
public monthViewColumnHeader({date, locale}: DateFormatterParams): string {
return formatDate(date, 'EEE', locale); // use short week days
}
}
// in your component that uses the calendar
providers: [{
provide: CalendarDateFormatter,
useClass: CustomDateFormatter
}]
CalendarAngularDateFormatter
import { CalendarAngularDateFormatter } from '../calendar-angular-date-formatter/calendar-angular-date-formatter.provider';
import { Injectable } from '@angular/core';
/**
* This class is responsible for all formatting of dates. There are 3 implementations available, the `CalendarAngularDateFormatter` (default) which uses the angular date pipe to format dates, the `CalendarNativeDateFormatter` which will use the <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Intl" target="_blank">Intl</a> API to format dates, or there is the `CalendarMomentDateFormatter` which uses <a href="http://momentjs.com/" target="_blank">moment</a>.
*
* If you wish, you may override any of the defaults via angulars DI. For example:
*
* ```typescript
* import { CalendarDateFormatter, DateFormatterParams } from 'angular-calendar';
* import { formatDate } from '@angular/common';
* import { Injectable } from '@angular/core';
*
* @Injectable()
* class CustomDateFormatter extends CalendarDateFormatter {
*
* public monthViewColumnHeader({date, locale}: DateFormatterParams): string {
* return formatDate(date, 'EEE', locale); // use short week days
* }
*
* }
*
* // in your component that uses the calendar
* providers: [{
* provide: CalendarDateFormatter,
* useClass: CustomDateFormatter
* }]
* ```
*/
@Injectable()
export class CalendarDateFormatter extends CalendarAngularDateFormatter {}