angular - 在 npm fullcalendar 中动态加载事件

Question

在我的项目中，我使用 npm full calendar 添加了一个日历。因为我创建了硬编码的事件。我正在尝试通过调用 api get 方法从数据库中填充事件。我已将模型数据添加到数组中，但无法访问 addEventListener 方法中的数组。

export class AdminconsoleComponent {
  @Input() eventData: any;
  holiList: any[];

  upcomingList: any[];
  holidayModel: Holiday;
  holidayList: Holiday[];
ngOnInit() {
    this.holidayList = [];
    this._holidayService.getHolidayArray().subscribe((result: any) => {

      for (let i = 0; i < result.length; i++) {
        this.holiList[i] = new Holiday;
        this.holidayModel = new Holiday;
        this.holidayModel.start = result[i].start;
        this.holidayModel.title = result[i].title;
        this.holidayList.push(this.holidayModel);
      }
    });


      document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar');

        var calendar = new Calendar(calendarEl, {
          plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
          editable: true,
          eventLimit: true, // allow "more" link when too many events
          selectable: true,
          selectMirror: true,
          select: function (arg) {
            var start = arg.start.toString();
            var date = start.slice(9, 10);
            var year = start.slice(11, 15);
            var month = start.slice(4, 7);
            if (month === "Jan") month = '01';
            if (month === "Feb") month = '02';
            if (month === "Mar") month = '03';
            if (month === "Apr") month = '04';
            if (month === "May") month = '05';
            if (month === "Jun") month = '06';
            if (month === 'Jul') month = '07';
            if (month === 'Aug') month = '08';
            if (month === 'Sep') month = '09';
            if (month === 'Oct') month = '10';
            if (month === 'Nov') month = '11';
            if (month === 'Dec') month = '12';
            var fullDate = date + '/' + month + '/' + year;
            $("#holiday").val(fullDate);
            $("#toggler")[0].click();
            calendar.unselect()
          },

          events: this.holidayList



          //events: [
          //  {
          //    title: 'All Day Event',
          //    start: '2019-07-01'
          //  },
          //  {
          //    title: 'Long Event',
          //    start: '2019-06-07',
          //    end: '2019-06-10'
          //  },
          //  {
          //    groupId: 999,
          //    title: 'Repeating Event',
          //    start: '2019-06-09T16:00:00'
          //  },
          //  {
          //    groupId: 999,
          //    title: 'Repeating Event',
          //    start: '2019-06-16T16:00:00'
          //  },
          //  {
          //    title: 'Conference',
          //    start: '2019-06-11',
          //    end: '2019-06-13'
          //  },
          //  {
          //    title: 'Meeting',
          //    start: '2019-06-12T10:30:00',
          //    end: '2019-06-12T12:30:00'
          //  },
          //  {
          //    title: 'Lunch',
          //    start: '2019-06-12T12:00:00'
          //  },
          //  {
          //    title: 'Meeting',
          //    start: '2019-06-12T14:30:00'
          //  },
          //  {
          //    title: 'Happy Hour',
          //    start: '2019-06-12T17:30:00'
          //  },
          //  {
          //    title: 'Dinner',
          //    start: '2019-06-12T20:00:00'
          //  },
          //  {
          //    title: 'Birthday Party',
          //    start: '2019-06-13T07:00:00'
          //  },
          //  {
          //    title: 'Click for Google',
          //    url: 'http://google.com/',
          //    start: '2019-06-28'
          //  }
          //],



        });

        calendar.render();
      });

如何将这些事件从我的数据库加载到 fullcalendar？

标签： angulartypescriptangular7

Answer 1

您无法访问events: this.holidayList，因为this内部 afunction()指的是函数本身，而不是AdminconsoleComponent.

也许改变这个：

      document.addEventListener('DOMContentLoaded', function () {

变成箭头函数：

      document.addEventListener('DOMContentLoaded', () => {

箭头函数不会创建自己的this，因此this实际上会引用AdminconsoleComponent.