Question

我在计划区域设置方面存在一个问题。

在它的文档（Primeng schedule docs，Full calendar locale docs）中说，该区域设置可以由object（{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

您需要＆＃34; fullcalendar / dist / lang /＆＃39;您的语言＆＃39;＆＃34;。

之后，你可以简单地添加

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

您可以在此处找到所有可用的语言：fullcalendar github

Answer 2

但它正好在文档中：

不同语言和格式的本地化是通过将设置对象绑定到locale属性来定义。以下是西班牙月份名称的时间表。

模板

<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文档以获取可用选项。现有翻译可用here。

Answer 3

可悲的是，我没有足够的声誉来撰写评论，所以我必须添加另一个答案...... 我目前面临同样的问题，现在我只是硬编码翻译（从fullcalendar语言环境文件复制）。但我宁愿只使用现有的翻译！您能否提供一些有关如何在组件中导入和使用区域设置文件的信息？我真的不知道如何在角度2应用程序中“需要”这样的外部JavaScript文件，我将非常感谢你的帮助！：）

编辑：好的，我摆弄了一下，发现了一个适合我的解决方案：

我将一个语言环境文件添加到我的angular-cli配置中（在“scripts”键下），并且我通过在p-schedule组件中将字符串设置为[locale]输入来使用语言环境。为了微调我使用“选项”输入并设置像“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和＆＃34; angular2-meteor＆＃34; 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>

如果您正在使用角度cli，我相信这些应该添加到＆＃34;脚本＆＃34; .js文件或＆＃34;样式＆＃34;对于.css文件 .angular-cli.json 而不是index.html。在该文件中，您甚至可以引用位于node_modules中的文件。例如，您可以在最新的primeng源代码中查看该文件（以下代码不会完全解决语言环境问题，它只是为.angular-cli.json提供语法示例）：

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

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

注2 ：如果您尝试使用＆＃34;要求＆＃34;加载语言文件并获取＆＃34; Uncaught TypeError：e.fullCalendar.datepickerLocale不是函数＆＃34;，我的解决方案将解决此问题。（你实际上并不需要＆＃34;要求＆＃34;）

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安排区域设置

5 个答案: