选项卡单击上的 Angular 全日历初始化问题

Question

我正在开发 Angular7 项目，并遇到完整日历的问题。 我想在选项卡上显示日历，但角度完整日历未在选项卡活动时初始化。 请参考下面的截图

我正在使用材质选项卡https://material.angular.io/components/tabs/overview对于完整日历，我已经集成了https://github.com/fullcalendar/fullcalendar-example-projects/tree/master /角度这个。

代码

约会-Calendar.Component.ts

 export class AppointmentCalendarComponent implements OnInit {

        @ViewChild('calendar', {static: true}) calendarComponent: FullCalendarComponent; // the #calendar in the template


        calendarPlugins = [dayGridPlugin, timeGrigPlugin, interactionPlugin];
        calendarWeekends = true;

       calendarEvents: EventInput[] = [{"title":"Dr. Helen Jones 07:20 PM","start":"2019-07-31 19:20:00"},{"title":"Dr. Jonathan 07:20 PM","start":"2019-08-07 19:20:00"}];


      constructor() { }

       ngOnInit() {}


    }

约会.component.ts

<mat-tab-group [selectedIndex]="selectedTab" [disableRipple]="true" animationDuration="0ms">
        <mat-tab label = "List View"> 
             <app-appointment-listing (selectTab)="getOutputval($event)" ></app-appointment-listing>
        </mat-tab>
        <mat-tab label = "Calendar">
           <app-appointment-calendar (selectTab)="getOutputval($event)"></app-appointment-calendar> 
        </mat-tab>
    </mat-tab-group>

约会-calendar.component.html

<div class="card card-box">
   <div class="card-box-content">
      <div class="row">
         <div class="col-sm-12 text-right btn-wrap margin-btm20">
            <a [routerLink]="['/appointment/create']" class="btn btn-primary">
            <i class="fas fa-plus-circle"></i> Add New
            </a>
         </div>
      </div>
      <div class="row">
         <div class="col-md-12 col-sm-12">
            <full-calendar
            #calendar
            defaultView="dayGridMonth"
            [header]="{
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
            }"
            [plugins]="calendarPlugins"
            [weekends]="calendarWeekends"
            [events]="calendarEvents"
            (dateClick)="handleDateClick($event)"
            ></full-calendar>   
         </div>
      </div>
   </div>
</div>

请推荐

Answer 1

经过调查，我发现这个问题与css有关。所以我只是将 .fc-widget-content .fc-scroller {height: auto !important;} 放在 style.css 中并解决了问题

Answer 2

我已经解决了这个问题，只需修复以下几点即可。

1. 安装正确的插件

   npm install --save @fullcalendar/timegrid @fullcalendar/interaction

2. 导入您的预约-Calendar.Component.ts 文件

   从“@fullcalendar/timegrid”导入时间网格；

   从“@fullcalendar/interaction”导入交互；

3. 使用以下内容更新您的日历插件列表：

   calendarPlugins = [dayGridPlugin, timeGrid, 交互];

Answer 3

这是全压光机的一个特点。当日历不可见时，Fullcalender 不会渲染日历。唯一的解决方案是在选项卡更改事件上手动渲染日历。

https://fullcalendar.io/docs/render

Answer 4

对我来说，我使用

ngIf="selectedIndex = 1"

制作了 fullCalenar html 标签，并在构造函数中添加了

this.calendar?.getApi()?.updateSize()

以在初始化组件时更新大小

Answer 5

我在 Angular 16 + PrimeNG 选项卡中遇到了这个问题。问题的根本原因是 FullCalendar 有一个功能，当它不可见时，它不会呈现自身。在选项卡上使用它会使其在日历尝试呈现自身的那一刻“不可见”。为了克服这个问题，我只找到了一个有点脏的解决方案，我在视图初始化完成后调用渲染。我在 FullCalendar 组件上有一个包装器，这个包装器位于每个选项卡上，如下所示：

<p-tabView #tabView [(activeIndex)]="activeIndex">
    <p-tabPanel *ngFor="let item of items; index as i" [header]="item.name">
      <ng-container *ngIf="tabView.activeIndex === i">
        <calendar-wrapper [id]="item.id" [calendarOptions]="calendarOptions[i]"></calendar-wrapper>
      </ng-container>
    </p-tabPanel>
  </p-tabView>

在日历包装器中，有一个日历对象（ViewChild 引用）被包装到 setTimeout 中以将其从流程中拉出，确保在日历已经可见时调用它：

ngAfterViewInit() {
    window.setTimeout(() => {
      this.fCalendarObjects?.getApi().render();
    }, 1);
}

这 1 毫秒对用户来说是不可见的，但足以正确地包含在上下文堆栈中。