如何使用angular7在事件外但在全日历的日单元内显示文本?

时间:2019-05-10 19:08:56

标签: angular fullcalendar angular7

我正在使用@ 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。

0 个答案:

没有答案