Angular-calendar: How to shorten a day in calendar header?

[vinay13]

I am using angular-calendar for mobile app and calendar header day is appearing in Full text with ellipse css property.
But i want it to be like Sun,Mon,Tues etc.

[mattlewis92]

See this answer: https://github.com/mattlewis92/angular-calendar/issues/78#issuecomment-256573939

But override the monthViewColumnHeader method. Hope that helps! 😃

[vinay13]

I'm not able to do . Can u provide a code ?

[mattlewis92]

Sure thing:

import {CalendarNativeDateFormatter, DateFormatterParams, CalendarModule} from 'angular2-calendar';

class CustomDateFormatter extends CalendarNativeDateFormatter {

  public monthViewColumnHeader({date, locale}: DateFormatterParams): string {
    return new Intl.DateTimeFormat(locale, {weekday: 'short'}).format(date);
  }

}

@NgModule({
  import: [CalendarModule],
  providers: [
    CalendarEventTitleProvider, 
     {provide: CalendarDateFormatter, useClass: CustomDateFormatter}
  ]
})
class ModuleThatUsesTheCalendar{}