简体   繁体   English

在 angular-bootstrap-calendar 中显示短工作日而不是长工作日

[英]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...).我在 Angular 4 应用程序中使用angular-bootstrap-calendar ,它会显示较长的工作日(例如:星期日、星期一等...)。 Instead, I want short week days with 2 letters (ex: Su, Mo, etc...).相反,我想要有 2 个字母的短工作日(例如:Su、Mo 等...)。 Does it have any pre-defined class which I can use directly in my application?它有任何预定义的 class 可以直接在我的应用程序中使用吗?

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:在我找到答案之前找到了这个线程(3 个而不是 2 个字母,但比整个工作日更好)所以我把它留给下一个人:

Answer from the Developer of the Module:模块开发者的回答:

But override the monthViewColumnHeader method但是重写 monthViewColumnHeader 方法

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替代 2 个字母
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'

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM