File

projects/angular-calendar/src/modules/common/calendar-date-formatter/calendar-date-formatter.provider.ts

Description

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
}]

Extends

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 {}

results matching ""

    No results matching ""