2

I'm using angular-bootstrap-calendar in Angular 4 app, and it displays long week days (ex: Sunday, Monday, etc...). Instead, I want short week days with 2 letters (ex: Su, Mo, etc...). Does it have any pre-defined class which I can use directly in my application?

imPK
  • 764
  • 2
  • 7
  • 30

1 Answers1

0

Found this thread before I found the answer (3 instead of 2 Letters but better than full weekdays) so im leaving this here for the next Person:

Answer from the Developer of the Module:

But override the monthViewColumnHeader method

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

Source

Alternative with 2 Letters
If that doesnt work get the default template from the Module you want and change

<b>{{ day.date | calendarDate : 'weekViewColumnHeader' : locale }}</b

to

<b>{{ day.date | date:'EEEEE':undefined:'en'}}</b><br />
// angular datepipe date:'format':timezone:'locale'
Greencoms
  • 299
  • 10