PrimeNG 本地时间表

Question

我有一个关于日程区域设置的问题。

在它的文档 (Primeng schedule docs, Full calendar locale docs) 中说，可以通过对象 ({locale:'en'}) 设置区域设置，但它不显示任何其他语言，除了英语。

如果我想设置其他语言怎么办？

<p-schedule
                [events]="events"
                [locale]="???"
                [header]="header"
                [editable]="false"
                [allDaySlot]="false"
                [defaultView]="'agendaWeek'"
                (onEventClick)="goToSelectedEvent($event)"
                [eventRender]="eventRender"
                [contentHeight]="800"
        ></p-schedule>

Answer 1

但它就在文档中：

Localization for different languages and formats is defined by binding the settings object to the locale property. Following is a schedule with Spanish month names.

模板

<p-schedule [events]="events" [locale]="es"></p-schedule>

分量

export class MyComponent {

    es: any;

    ngOnInit() {
        this.es = {
            monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio',
                'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre']
        };
    }
}

访问fullcalendar documentation for the available options. Existing translations are available here。

Answer 2

您需要要求"fullcalendar/dist/lang/'your language'"。

之后，您只需添加

this.locale = {
        locale: 'your language'
};

您可以在这里找到所有可用的语言：fullcalendar github

Answer 3

遗憾的是我没有足够的声誉来写评论，所以我必须添加另一个答案... 我现在面临同样的问题，现在我只是硬编码翻译（从 fullcalendar 语言环境文件复制）。但我更愿意只使用现有的翻译！您能否提供更多有关如何在组件中导入和使用语言环境文件的信息？我真的不知道如何在 angular 2 应用程序中 "require" 这样的外部 javascript 文件，非常感谢您的帮助！ :)

编辑： 好的，我摆弄了一下，找到了适合我的解决方案：

我在我的 angular-cli 配置中添加了一个语言环境文件（在 "scripts" 键下），我通过在 [=29= 中设置一个字符串作为 [locale] 输入来使用语言环境] 零件。对于 fine-tuning，我使用 "options" 输入并设置 "eventTextColor" 等内容，因此它不使用默认值。结果看起来像这样：

HTML:

<p-schedule [locale]="locale" [options]="options"></p-schedule>

your.component.ts:

import { Component, OnInit, Input } from '@angular/core';
import { Options, Header, EventObject } from 'fullcalendar';

@Component({
  selector: 'your-selector',
  templateUrl: './your.component.html',
  styleUrls: ['./your.component.css']
})
export class YourComponent implements OnInit {
  private locale = 'de';

  private options: Options = {
    eventTextColor: '#ffffff',
    slotLabelFormat: 'HH:mm',
    ...
  }
}

Answer 4

我正在使用 primeng 2.0.6、fullcalendar 3.4.0 和 "angular2-meteor" 0.7.1 库。这对我有用：

根据 https://www.primefaces.org/primeng/#/schedule 我在 scheduledemo.html 文件中设置
```
<p-schedule ... locale="fr">
```

根据 https://fullcalendar.io/docs/text/locale/，我在 index.html 的 head 部分添加了以下导入（这是针对法语的)

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/fr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/locale/fr.js"></script>

如果您使用的是 angular cli，我相信这些应该添加到 .js 文件的 "scripts" 部分或文件 "styles" 的 .css 部分=31=].angular-cli.json 而不是 index.html。在该文件中，您甚至可以引用位于 node_modules 中的文件。举个例子，你可以看看最新的primeng源码中的文件（下面的代码并不能完全解决locale问题，只是给出.angular-cli.json的语法例子）：

"styles": [
    "../node_modules/fullcalendar/dist/fullcalendar.min.css",
    ...
  ],
  "scripts": [
    "../node_modules/moment/moment.js",
    "../node_modules/fullcalendar/dist/fullcalendar.js",
  ],

注意 1： 如果您使用的是单一语言文件（如我的示例），您甚至不需要使用 scheduledemo.html 执行步骤 1（根据 fullcalendar 文档：If you are simply loading one locale, you do not need to specify the locale option）。

注2：如果尝试使用"require"加载语言文件得到"Uncaught TypeError: e.fullCalendar.datepickerLocale is not a function" ，我的解决方案将解决此问题。（实际上你根本不需要 "require"）

Answer 5

在最新版本 11 中，您可以使用 I18N

在组件中，使用日历时：

// Import PrimeNgConfig
import {PrimeNGConfig} from 'primeng/api';

// Inject PrimeNgConfig
 constructor(private primeNGConfig: PrimeNGConfig) {
  }

// Init PrimeNgConfig settings, in the lang you need
 ngOnInit(): void {
    this.primeNGConfig.setTranslation(
      {
        firstDayOfWeek: 1,
        dayNames: ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
        dayNamesShort: ['dom', 'lun', 'mar', 'mié', 'jue', 'vie', 'sáb'],
        dayNamesMin: ['D', 'L', 'M', 'X', 'J', 'V', 'S'],
        monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        monthNamesShort: ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic'],
        today: 'Hoy',
        clear: 'Limpiar',
      }
    );
  }

在html

  <p-calendar showButtonBar="true"
                          dateFormat="dd/mm/yy"
                          yearRange="2000:2030"
                          formControlName="date_born"
                          inputId="date_born"
                          firstDayOfWeek="1"></p-calendar>

PrimeNG 本地时间表

PrimeNG schedule locale

angular

fullcalendar

primeng