Angular 来自 mattlewis92/angular-calendar 的日历不会在加载时启动我的数据

Question

我已经从 (https://github.com/mattlewis92/angular-calendar) 实施了 Angular 日历在我的项目中，我从 API 调用中填充数据，它不会在页面加载时在日历上显示我的数据。

但是当我点击其中一个日历日期或点击周视图或月视图时，它会在日历上显示我的数据有什么想法或解决方案吗？谢谢。

我的组件：

           import {Component,ChangeDetectionStrategy,ViewChild,TemplateRef, OnInit} from '@angular/core';
    import {startOfDay,  endOfDay,  subDays,  addDays,  endOfMonth,  isSameDay,  isSameMonth,  addHours,} from 'date-fns';
    import { Subject } from 'rxjs';
    import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
    import {  CalendarEvent,  CalendarEventAction,  CalendarEventTimesChangedEvent,  CalendarView,} from 'angular-calendar';
    import { ITasks } from '../../../models/tasks.model';

    import { TasksService } from '../../../services/tasks.service';
    import { DialogService } from '../../../../shared/services/dialog.service';
    import { MatDialog } from '@angular/material/dialog';
    import { CalendarEventActionsComponent } from 'angular-calendar/modules/common/calendar-event-actions.component';

    const colors: any = {
      red: {
        primary: '#ad2121',
        secondary: '#FAE3E3',
      },
      blue: {
        primary: '#1e90ff',
        secondary: '#D1E8FF',
      },
      yellow: {
        primary: '#e3bc08',
        secondary: '#FDF1BA',
      },
    }; @Component({
      selector: 'app-taskscalendarview',
      templateUrl: './taskscalendarview.component.html',
      styleUrls: ['./taskscalendarview.component.scss']
    })
    export class TaskscalendarviewComponent implements OnInit {
      @ViewChild('modalContent', { static: true }) modalContent: TemplateRef<any>;

      view: CalendarView = CalendarView.Month;

      CalendarView = CalendarView;

      viewDate: Date = new Date();

      modalData: {
        action: string;
        event: CalendarEvent;
      };

      actions: CalendarEventAction[] = [
        {
          label: '<i class="fas fa-fw fa-pencil-alt"></i>',
          a11yLabel: 'Edit',
          onClick: ({ event }: { event: CalendarEvent }): void => {
            this.handleEvent('Edited', event);
          },
        },
        {
          label: '<i class="fas fa-fw fa-trash-alt"></i>',
          a11yLabel: 'Delete',
          onClick: ({ event }: { event: CalendarEvent }): void => {
            this.events = this.events.filter((iEvent) => iEvent !== event);
            this.handleEvent('Deleted', event);
          },
        },
      ];

      refresh: Subject<any> = new Subject();

      events: CalendarEvent[] = [
        // {
        //   start: subDays(startOfDay(new Date()), 1),
        //   end: addDays(new Date(), 1),
        //   title: 'A 3 day event',
        //   color: colors.red,
        //   actions: this.actions,
        //   allDay: true,
        //   resizable: {
        //     beforeStart: true,
        //     afterEnd: true,
        //   },
        //   draggable: true,
        // },
        // {
        //   start: startOfDay(new Date()),
        //   title: 'An event with no end date',
        //   color: colors.yellow,
        //   actions: this.actions,
        // },
        // {
        //   start: subDays(endOfMonth(new Date()), 3),
        //   end: addDays(endOfMonth(new Date()), 3),
        //   title: 'A long event that spans 2 months',
        //   color: colors.blue,
        //   allDay: true,
        // },
        // {
        //   start: addHours(startOfDay(new Date()), 2),
        //   end: addHours(new Date(), 2),
        //   title: 'A draggable and resizable event',
        //   color: colors.yellow,
        //   actions: this.actions,
        //   resizable: {
        //     beforeStart: true,
        //     afterEnd: true,
        //   },
        //   draggable: true,
        // },
      ];

      activeDayIsOpen: boolean = true;

      constructor(
        private modal: NgbModal,
        public dialog: MatDialog,
        private dialogService: DialogService,
        private taskservice:TasksService) {}

      ngOnInit(){
        console.log('---------Hi call db-----');
        this.getAllmyTasks();
      }

      getAllmyTasks(){

        this.taskservice.getAllTasks('/tasks/').subscribe(
          (modelData: ITasks[]) => {
            console.log(modelData);
            modelData.forEach((item)=>{
              this.events.push({
                id:item.TaskID, 
                start:new Date(),
                end:new Date(item.EndDate),
                title:item.TaskName,
                color: colors.yellow,
                actions: this.actions
              })
            });
          },
          error => {
            const res = this.dialogService.ErrorDialog('Server Error', 'Sorry, the system is unavailable at the moment.', 'Close', 'Try again');
            res.afterClosed().subscribe(dialogResult => {
              if (dialogResult) {
                //this.callNext(200);
              }
            });
          }
        );
      }
      dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
        //--note this.viewDate is current date;
        console.log(date);
        if (isSameMonth(date, this.viewDate)) {
          if (
            (isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) ||
            events.length === 0
          ) {
            this.activeDayIsOpen = false;
          } else {
            this.activeDayIsOpen = true;
          }
          this.viewDate = date;
        }
      }

      eventTimesChanged({
        event,
        newStart,
        newEnd,
      }: CalendarEventTimesChangedEvent): void {
        this.events = this.events.map((iEvent) => {
          if (iEvent === event) {
            return {
              ...event,
              start: newStart,
              end: newEnd,
            };
          }
          return iEvent;
        });
        this.handleEvent('Dropped or resized', event);
      }

      handleEvent(action: string, event: CalendarEvent): void {
        this.modalData = { event, action };
        this.modal.open(this.modalContent, { size: 'lg' });
      }

      addEvent(): void {
        this.events = [
          ...this.events,
          {
            title: 'New event',
            start: startOfDay(new Date()),
            end: endOfDay(new Date()),
            color: colors.red,
            draggable: true,
            resizable: {
              beforeStart: true,
              afterEnd: true,
            },
          },
        ];
      }

      deleteEvent(eventToDelete: CalendarEvent) {
        this.events = this.events.filter((event) => event !== eventToDelete);
      }

      setView(view: CalendarView) {
        this.view = view;
      }

      closeOpenMonthViewDay() {
        this.activeDayIsOpen = false;
      }
    }

Answer 1

我通过调用解决了这个问题：this.viewDate = new Date();在我填充日历中的数据之后。

这是更新后的函数：

   getAllmyTasks(){

this.taskservice.getAllMyPendingTasks('/tasks/getallmypendingtasks').subscribe(
  (myDbData: ITasks[]) => {
    console.log(myDbData);
    myDbData.forEach((item)=>{
      this.events.push({
        id:item.TaskID, 
        start:new Date(item.StartDate),
        end:new Date(item.EndDate),
        title:item.TaskName,
        color: colors.yellow,
        actions: this.actions
      })
    });
    this.viewDate = new Date();
  },
  error => {
    const res = this.dialogService.ErrorDialog('Server Error', 'Sorry, the system is unavailable at the moment.', 'Close', 'Try again');
    res.afterClosed().subscribe(dialogResult => {
      if (dialogResult) {
        //this.callNext(200);
      }
    });
  }
 );
 }

Angular 来自 mattlewis92/angular-calendar 的日历不会在加载时启动我的数据

Angular Calendar from mattlewis92/angular-calendar does not initiate my data on load

angular

angular-calendar