我正在使用@ fullcalendar / angular在日历中显示事件。
根据我们的要求,我应该在事件开始的当天的单元格的左上角显示事件的开始时间。另外,我应该在事件结束的当天的单元格的右下角显示事件的结束时间。
我需要知道要设置的任何特殊扩展道具,以便我可以传递数据或设置html以格式化日期单元格中的文本显示。
import { Component, OnInit, ViewChild, Input, ElementRef, Renderer2, OnDestroy, ViewEncapsulation, NgZone } from '@angular/core';
import { OptionsInput, FgEventRenderer, EventApi } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import { Member, CalendarEvent } from 'src/app/shared/models/MemberInfo';
import { FullCalendarComponent } from '@fullcalendar/angular';
@Component({
selector: 'app-calendar',
templateUrl: './calendar.component.html',
styleUrls: ['./calendar.component.less'],
})
export class CalendarComponent implements OnInit {
calendarEvents: CalendarEvent[] = [];
@Input() member: MemberInfo;
constructor() { }
@ViewChild('fullcalendar') fullcalendar: FullCalendarComponent;
ngOnInit() {
this.fullcalendar.editable = false;
this.fullcalendar.selectable = true;
this.fullcalendar.displayEventTime = false;
this.fullcalendar.fixedWeekCount = false;
this.fullcalendar.eventTextColor = 'white';
this.fullcalendar.height = 650;
this.fullcalendar.header = { left: 'prev', center: 'title', right: 'next' };
this.fullcalendar.events = this.member.calendarEvents;
this.fullcalendar.handleWindowResize = true;
this.fullcalendar.themeSystem = 'bootstrap4';
this.fullcalendar.plugins = [dayGridPlugin, interactionPlugin];
}
}
示例:事件于2019年5月10日07:00 AM开始,于2019年5月11日5:00 PM结束。然后5/10的日单元格的左上角应显示0700,而11的日单元格的右下角应显示1700。