如何添加选项以使用 JavaScript 日历（在我的 Angular APP 中）将视图类型更改为天数？

Question

大家好，我在 angular 9 应用程序中使用 https://fullcalendar.io/（版本 5）的完整日历。

我看到日历有这些选项来更改视图类型。

但我不明白如何在我的应用程序中启用这些选项我目前有这个

准备安装 es

我已经安装了模块

npm install --save @fullcalendar/angular
npm install --save  @fullcalendar/daygrid
npm i @fullcalendar/interaction

我已经将它导入到你使用它的模块中

// calendar
import { FullCalendarModule } from '@fullcalendar/angular';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
FullCalendarModule.registerPlugins([
  dayGridPlugin,
  interactionPlugin
]);

and I've created a component called organizer to use it, in which I have the following code

    import { Component, OnInit } from '@angular/core';
    import { CalendarOptions } from '@fullcalendar/angular';
    
    @Component({
      selector: 'app-skechuler',
      templateUrl: './skechuler.component.html',
      styles: [
      ]
    })
    export class SkechulerComponent implements OnInit {
    
      calendarOptions: CalendarOptions = {
        initialView: 'dayGridMonth',
        dateClick: this.handleDateClick.bind(this), // bind is important!
        events: [
          { title: 'event 1', date: '2020-06-27' },
          { title: 'event 2', date: '2020-06-30' }
        ]
      };
      handleDateClick(arg: any) {
        alert('date: ' + arg.dateStr);
      }
    
    
      constructor() { }
    
      ngOnInit(): void {
      }
    
    }

及其html

<full-calendar #calendar [options]="calendarOptions"></full-calendar>


but i don't understand how to activate the above mentioned function to access this view:

Answer 1

尝试提供 headerToolbar 选项。

calendarOptions: CalendarOptions = {
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    initialView: 'dayGridMonth',

如何添加选项以使用 JavaScript 日历（在我的 Angular APP 中）将视图类型更改为天数？

How to add option to change view type to days using JavaScript Calendar (in my Angular APP)?

javascript

angular

typescript

fullcalendar-4

fullcalendar-5