如何设置同步组件 pt-BR

Question

我很难理解如何定义Angular Synfusion组件的国际化和全球化。

在葡萄牙语的stackoverflow中，没有人可以帮助我做一些我认为简单的事情，所以我在这里问这个问题。

目前我正在使用Angular Schedule组件，它都是英文的，我希望它都是葡萄牙语。

我

唯一需要的是了解我实际做了什么来完成这项工作，因为我查看了文档，无法弄清楚我需要更改哪些文件才能设置。

它要求配置文件system.config.js但此文件在我的 Angular 项目中不存在。

1. 在所有组件和时间格式上设置从 en-US 到 pt-BR 的区域设置。

https://ej2.syncfusion.com/angular/documentation/schedule/localization/#globalization

https://cdn.syncfusion.com/js/assets/i18n/ej.culture.pt-BR.min.js

模板.html：

<!-- Setting the locale to the value 'pt-BR' is not enough. -->
<ejs-schedule #scheduleObj width='100%' height='500px' locale="pt-BR" [currentView]="currentView" [selectedDate]="selectedDate"
    [group]="group" [eventSettings]="eventSettings" (actionComplete)="onActionComplete($event)">
    <e-resources>
        <e-resource field='salaId' title='Selecione a sala' [dataSource]='salasAtendimento'
            [allowMultiple]='allowMultiple' name='Salas' textField='nome' idField='id' colorField='color'>
        </e-resource>
        <e-resource field='profissionalId' title='Profissionais' [dataSource]='profissionais'
            [allowMultiple]='allowMultiple' name='Profissionais' textField='nome' idField='id' groupIDField='salaId'
            colorField='color'>
        </e-resource>
    </e-resources>
    <e-views>
        <e-view option="TimelineDay"></e-view>
        <e-view option="TimelineWeek"></e-view>
        <e-view option="Agenda"></e-view>
    </e-views>
</ejs-schedule>

Answer 1

包含包

npm i cldr-data

并在 tsconfig.json 中添加

"编译器选项"：{ "resolveJsonModule"： true }

对我来说工作得很好。

https://ej2.syncfusion.com/angular/documentation/schedule/localization/#globalization

import {Component, OnInit} from '@angular/core';
import {EventSettingsModel, GroupModel,} from '@syncfusion/ej2-schedule';
import {resourceData, timelineResourceData} from 'app/entities/contrato/data';
import {extend, loadCldr, L10n} from '@syncfusion/ej2-base';
import * as  numberingSystems from 'cldr-data/supplemental/numberingSystems.json';
import * as  gregorian from 'cldr-data/main/pt/ca-gregorian.json';
import * as  numbers from 'cldr-data/main/pt/numbers.json';
import * as  timeZoneNames from 'cldr-data/main/pt/timeZoneNames.json';
loadCldr(numberingSystems['default'], gregorian['default'], numbers['default'], timeZoneNames['default']);
L10n.load({
  'pt': {
    'schedule': {
      'day': 'dia',
      'week': 'semana',
      'workWeek': 'Semana de trabalho',
      'month': 'Mês',
      'agenda': 'Agenda',
      'weekAgenda': 'Agenda de da semana',
      'workWeekAgenda': 'Agenda da Semana de Trabalho',
      'monthAgenda': 'Agenda do mês',
      'today': 'Hoje',
      'noEvents': 'Sem eventos',
      'allDay': 'Todo o dia',
      'start': 'Início',
      'end': 'Fim',
      'more': 'Mais',
      'close': 'Fechar',
      'cancel': 'Cancelar',
      'noTitle': '(Sem título)',
      'delete': 'Apagar',
      'deleteEvent': 'Excluir evento',
      'selectedItems': 'Ítens selecionados',
      'deleteSeries': 'Apagar série',
      'edit': 'Editar',
      'editSeries': 'Editar série',
      'editEvent': 'Editar evento',
      'createEvent': 'Criar',
      'subject': 'Assunto',
      'addTitle': 'Adicionar título',
      'moreDetails': 'Mais detalles',
      'save': 'Salvar',
      'editContent': 'Deseja editar apenas este evento ou toda a série?',
      'deleteRecurrenceContent': 'Deseja eliminar só este evento ou toda a série?',
      'deleteContent': 'Tem certeza que deseja apagar este evento?',
      'newEvent': 'Novo evento',
      'title': 'Título',
      'location': 'Localização',
      'description': 'Descrição',
      'timezone': 'Time Zone',
      'startTimezone': 'Hora inicial',
      'endTimezone': 'Hora final',
      'repeat': 'Repetir',
      'saveButton': 'Salvar',
      'cancelButton': 'Cancelar',
      'deleteButton': 'Apagar',
      'recurrence': 'Recorrência',
      'editRecurrence': 'Editar recorrência',
      'repeats': 'Repete',
      'alert': 'Alerta',
      'startEndError': 'A data de finalização selecionada ocorre antes da da de início.',
      'invalidDateError': 'O valor da data é invalida.',
      'ok': 'Confirmar',
      'occurrence': 'Výskyt',
      'series': 'Série',
      'previous': 'Anterior',
      'next': 'Próximo',
      'timelineDay': 'Alocação de Hoje',
      'timelineWeek': 'Alocação Semanal',
      'timelineWorkWeek': 'Alocação do trabalho semanal',
      'timelineMonth': 'Alocação mensal'
    },
    'recurrenceeditor': {
      'none': 'Nenhum',
      'daily': 'Diário',
      'weekly': 'Semanal',
      'monthly': 'Mensal',
      'month': 'Mês',
      'yearly': 'Anual',
      'never': 'Nunca',
      'until': 'Até',
      'count': 'Contar',
      'first': 'Primeiro',
      'second': 'Segundo',
      'third': 'Tercero',
      'fourth': 'Quarto',
      'last': 'Último',
      'repeat': 'Repetir',
      'repeatEvery': 'Repita cada',
      'on': 'Repita en',
      'end': 'Fim',
      'onDay': 'Dia',
      'days': 'Dias)',
      'weeks': 'Semanas)',
      'months': 'Meses)',
      'years': 'Anos)',
      'every': 'cada',
      'summaryTimes': 'vecês)',
      'summaryOn': 'em',
      'summaryUntil': 'até',
      'summaryRepeat': 'Repita',
      'summaryDay': 'dias)',
      'summaryWeek': 'semanas)',
      'summaryMonth': 'meses)',
      'summaryYear': 'anos)',
      'monthWeek': 'Měsíční týden',
      'monthPosition': 'Pozice měsíce',
      'monthExpander': 'Expander měsíce',
      'yearExpander': 'Rok Expander',
      'repeatInterval': 'Interval opakování'
    },
    'calendar': {
      'today': 'Hoje'
    }
  }
});
@Component({
  selector: 'jhi-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['dashboard.scss']
})
export class DashboardComponent implements OnInit {
  public selectedDate: Date = new Date(2018, 3, 4);
  public group: GroupModel = {
    resources: ['Projects', 'Categories']
  };
  public projectDataSource: Object[] = [
    {text: 'PROJECT 1', id: 1, color: '#cb6bb2'},
    {text: 'PROJECT 2', id: 2, color: '#56ca85'},
    {text: 'PROJECT 3', id: 3, color: '#df5286'}
  ];
  public categoryDataSource: Object[] = [
    {text: 'Nancy', id: 1, groupId: 1, color: '#df5286'},
    {text: 'Steven', id: 2, groupId: 1, color: '#7fa900'},
    {text: 'Robert', id: 3, groupId: 2, color: '#ea7a57'},
    {text: 'Smith', id: 4, groupId: 2, color: '#5978ee'},
    {text: 'Micheal', id: 5, groupId: 3, color: '#df5286'},
    {text: 'Root', id: 6, groupId: 3, color: '#00bdae'}
  ];
  public allowMultiple: Boolean = true;
  public eventSettings: EventSettingsModel = {
    dataSource: extend([], resourceData.concat(timelineResourceData), null, true) as Object[]
  };
  constructor() {
  }
  ngOnInit() {
  }
}

.timeline-resource-grouping.e-schedule:not(.e-device) .e-agenda-view .e-content-wrap table td:first-child {
  width: 90px;
}
.timeline-resource-grouping.e-schedule .e-agenda-view .e-resource-column {
  width: 100px;
}

<ejs-schedule #scheduleObj locale="pt" width='100%' cssClass='timeline-resource-grouping' height='650px'
              [selectedDate]="selectedDate"
              [group]="group" [eventSettings]="eventSettings">
    <e-resources>
        <e-resource field='ProjectId' title='Choose Project' [dataSource]='projectDataSource'
                    [allowMultiple]='allowMultiple' name='Projects'
                    textField='text' idField='id' colorField='color'>
        </e-resource>
        <e-resource field='TaskId' title='Category' [dataSource]='categoryDataSource' [allowMultiple]='allowMultiple'
                    name='Categories'
                    textField='text' idField='id' groupIDField='groupId' colorField='color'>
        </e-resource>
    </e-resources>
    <e-views>
        <e-view option="TimelineDay"></e-view>
        <e-view option="TimelineWeek"></e-view>
        <e-view option="TimelineWorkWeek"></e-view>
        <e-view option="TimelineMonth"></e-view>
        <e-view option="Agenda"></e-view>
    </e-views>
</ejs-schedule>