如何在 angular 7 的 fullcalendar 中使用语言环境

Question

我需要在 angular 版本 7 中更改日历的语言。我没有找到太多关于此的文档。最主要的是更改日历上出现的日期的语言。

!-- 开始片段: js hide: false 控制台: true babel: false -->

import { Component, OnInit, ViewChild } from '@angular/core';
import { CalendarComponent } from 'ng-fullcalendar';
import { Options } from 'fullcalendar';

@Component({
  selector: 'app-calendario',
  templateUrl: './calendario.component.html',
  styleUrls: ['./calendario.component.css']
})
export class CalendarioComponent implements OnInit {
  //calendario
  calendarOptions: Options;
  displayEvent: any;
  @ViewChild(CalendarComponent) ucCalendar: CalendarComponent;

  constructor() { }

  ngOnInit() {

    this.calendarOptions = {
      editable: true,
      eventLimit: false,
      header: {
        left: '',
        center: 'title',
        right: 'month'
      },

      events: []
    };
  }      

}

我尝试在 calendarOptions 中添加属性 locale = 'es'，但它不起作用，将此添加到我的 angular json，但我不知道如何实现它

     "scripts": [
              "node_modules/fullcalendar/dist/locale/es.js"
            ]

Answer 1

谢谢加布里埃尔我用这种方法让它工作

首先确保你有你想要的语言的导入

import esLocale from '@fullcalendar/core/locales/es';
import frLocale from '@fullcalendar/core/locales/fr';

在您的 html 文件中，在完整日历选择器中，您应该为区域设置和区域设置选项分配值。

    <full-calendar
    defaultView="dayGridMonth"
    [locales]="locales"
    locale="es"
    [weekends]="false"
    [plugins]="calendarPlugins"></full-calendar>

然后是一个包含您需要的所有语言的变量

locales = [esLocale, frLocale];

Answer 2

您可以使用 FullCalendarComponent 设置区域设置代码来做到这一点。

@ViewChild('calendar') calendarComponent: FullCalendarComponent;

在 ngOnInit 中，像这样：

this.calendarComponent.locales = [ { code: 'pt-br' } ];

我希望这对你有用。