Primeng12+ 使用 full-calendar

primeng12 之后full-calendar就不是单独在primeng包内了，需要单独引入了，最近需要使用，记录下

 PrimeNG

Angular Component - Docs | FullCalendar

首先安装依赖

npm install @fullcalendar/angular @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/timegrid

然后再module中引入

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { SchedulePageRoutingModule } from './schedule-routing.module';

import { SchedulePage } from './schedule.page';
import { FullCalendarModule } from '@fullcalendar/angular';

import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

FullCalendarModule.registerPlugins([
  dayGridPlugin,
  timeGridPlugin,
  interactionPlugin
]);

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    FullCalendarModule,
    IonicModule,
    SchedulePageRoutingModule
  ],
  declarations: [SchedulePage]
})
export class SchedulePageModule { }

 然后再html中引入，这里用ngif控制的原因是，如果不控制，有可能再options为空的时候渲染出问题，导致之后的数据进来之后UI还是有问题，所以用ngif控制了，等有数据再渲染

  <div id="container" *ngIf="options">
    <full-calendar [options]="options"></full-calendar>
  </div>

然后设置options的值， 这里面需要注意的是，UI展示的name需要的key为 title， 时间为 start ,如果有end就用end，只有一个就是单独的时间，否则就是时间段。除了id以及刚才提到的属性，其他的属性设置之后都会在 extendedProps 属性内，例如在之后的设置点击事件，event.event 就可以获取到当前的值，如果想获取title 就是 event.event.title,但是如果是arrived 就需要event.event.extendedProps.arrived了。

     this.options = {
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay',
        },
        editable: false,
        selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        events: student?.subscribes.map((item) => {
          const parm = {};
          Reflect.set(parm, 'title', item.course.name);
          Reflect.set(parm, 'start', item.course.startTime);
          Reflect.set(parm, 'location', item.course.location);
          Reflect.set(parm, 'segment', item.course.segment);
          Reflect.set(parm, 'id', item.course.id);
          Reflect.set(parm, 'arrived', item.arrived);
          return parm;
        }),
        eventClick: (event) => {
          this.showDialog = true;
          this.detail = event.event;
        },
      };

效果大概就是这样 

BUG

这个在使用中发现，他的响应式布局有一个bug，可以看到明明是1月10号的数据，显示却是在1月17号。所有的数据都是这样，把数据渲染到了正确日期的下一周。

 一开始我只是单独的去调整css，因为他是绝对定位，我直接强制把top改成了0，在页面上看没问题，但是当重新渲染数据的时候就出问题了

:host ::ng-deep {
  .fc-daygrid-day-events{
    top: 0;
  }
}

 页面中数据渲染就会重叠，应该显示+1 more的却直接显示了数据。这样只有用第二种办法，先让他正常渲染，然后在ts中用jquery让他top 0.

:host ::ng-deep {

  .fc-daygrid-day-events{
    top: 30px;
  }

  .cure{
    top: 0!important;
  }
}

//import { interval } from 'rxjs';  

ngOnDestroy(): void {
    this.modifyUI?.unsubscribe();
  }

  ngOnInit() {
    this.modifyUI = interval(300).subscribe(() => {
      $('.fc-daygrid-day-events').addClass('cure');
    });
  }

一开始用的是timer，相当于setTimeout，这个问题是第一次渲染时候没问题，但是当切换了显示方式之后，返回的时候又会出现这个问题了，其实正确的方式应该是在所有切换展示方式的button加click事件，只要点击就timer之后添加class，我为了图方便就直接这样了。