CODEWITHSUNDEEP
angular-calendarangular-bootstrap-calendar
imPK
imPK

Reputation: 884

Display Short week days in angular-bootstrap-calendar instead of long week days

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?

Upvotes: 1

Views: 519

Answers (1)

user20291198
user20291198

Reputation:

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'

Upvotes: 0

Related Questions