primeng12 之后full-calendar就不是单独在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,我为了图方便就直接这样了。