Question

我在创建新活动时遇到问题。我的出发点是本教程： https://github.com/lbertenasco/ap-ng2-fullcalendar

教程本身工作正常，日历正在显示。但现在我尝试创建一个新事件，我从控制台收到错误： 尝试在没有日历的元素上调用FullCalendar方法。

错误是指此功能：

addNewEvent() {
    this.myCalendar.fullCalendar('renderEvents', this.myEvent);
  }

和我的完整代码：

import { Component, OnInit, ViewChild } from '@angular/core';
import { CalendarComponent} from 'ap-angular2-fullcalendar';
import * as $ from 'jquery';
import * as moment from 'moment';

@Component({
  selector: 'app-main-cal',
  templateUrl: './main-cal.component.html',
  styleUrls: ['./main-cal.component.css']
})
export class MainCalComponent implements OnInit {

  @ViewChild(CalendarComponent) myCalendar: CalendarComponent;

  myEvent = {
    title: 'my new event',
    allDay: true,
    start: '2018-01-30'
  };

    calendarOptions: Object = {

    editable: false,
    handleWindowResize: true,
    weekends: false,
    defaultView: 'agendaWeek',
    minTime: '08:00:00',
    maxTime: '20:00:00',
    columnFormat: 'ddd D/M',
    timeFormat: 'HH:mm',
    displayEventTime: true,
    allDayText: 'Ganztägig',

    events: [
      {
        title: 'All Day Event',
        start: '2016-09-01'
      },
      {
        title: 'Long Event',
        start: '2016-09-07',
        end: '2016-09-10'
      },
      {
        id: 999,
        title: 'Repeating Event',
        start: '2016-09-09T16:00:00'
      },
      {
        id: 999,
        title: 'Repeating Event',
        start: '2016-09-16T16:00:00'
      },
      {
        title: 'Conference',
        start: '2016-09-11',
        end: '2016-09-13'
      },
      {
        title: 'Meeting',
        start: '2016-09-12T10:30:00',
        end: '2016-09-12T12:30:00'
      },
      {
        title: 'Lunch',
        start: '2016-09-12T12:00:00'
      }
    ]
  };

  constructor() { }

  ngOnInit() {
    this.addNewEvent();
    console.log(this.myCalendar);
  }



  addNewEvent() {
    this.myCalendar.fullCalendar('renderEvents', this.myEvent);
  }

  changeCalendarView(view) {
    this.myCalendar.fullCalendar('changeView', view);
  }


  onCalendarInit(initialized: boolean) {
    console.log('Calendar initialized');
  }

}

和HTML：

<angular2-fullcalendar [options]="calendarOptions" (initialized)="onCalendarInit($event)"></angular2-fullcalendar>

我认为我在初始化日历方面做错了，但我不确定是什么。如果有人能帮助我，我会很高兴。

Angular2 Fullcalender：渲染新事件的问题

0 个答案: