Блог

Я бы извлекал события из REST API (весенняя загрузка), в моем fullcalendar ничего не отображается, но когда я использую статические события с INITIAL_EVENTS, это работает, и я не знаю, в чем проблема, пожалуйста, помогите мне, это результат моего API и моего кода :

 [{
id: 1,
title: "event1",
allDay: false,
start: "2021-04-30T23:00:00.000 0000",
end: "2021-05-01T00:00:00.000 0000"
},
{
id: 2,
title: "event2",
allDay: false,
start: "2021-05-02T00:00:00.000 0000",
end: "2021-05-02T01:00:00.000 0000"
},
{
id: 3,
title: "event3",
allDay: false,
start: "2021-05-02T23:00:00.000 0000",
end: "2021-05-03T00:00:00.000 0000"
}]
 

В моем dashboard.component.html:

 <full-calendar #calendar [options]="calendarOptions"></full-calendar>
 

В моей панели мониторинга.компонент.ts:

 export class DashboardComponent implements OnInit {

calendarVisible = true;
calendarOptions: CalendarOptions;
currentEvents: EventApi[] = [];

events: any;

handleCalendarToggle() {
this.calendarVisible = !this.calendarVisible;
}

handleWeekendsToggle() {
const { calendarOptions } = this;
calendarOptions.weekends = !calendarOptions.weekends;
}

handleDateSelect(selectInfo: DateSelectArg) {
const title = prompt('Please enter a new title for your event');


const calendarApi = selectInfo.view.calendar;
calendarApi.unselect(); // clear date selection

if (title) {
  calendarApi.addEvent({
    id: createEventId(),
    title,
    start: selectInfo.startStr,
    end: selectInfo.endStr,
    allDay: selectInfo.allDay
  });
  const data = {
    title: title,
    start: new Date(selectInfo.startStr),
    end: new Date(selectInfo.endStr), 
    allDay: selectInfo.allDay

  };
  this.dashboardService.add(data).subscribe(
    response => {
      console.log(response);
    },
    error => {
      console.log(error);
    });
}
}

handleEventClick(clickInfo: EventClickArg) {
if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
  clickInfo.event.remove();
  console.log(clickInfo.event.title);
  //this.remove(data);
}
}

handleEvents(events: EventApi[]) {
this.currentEvents = events;
console.log(this.currentEvents);
}

constructor( private dashboardService: DashboardService) { 

}

ngOnInit() {

this.dashboardService.getAll().subscribe(data => {
  this.events = data;
  console.log(this.events);
});

this.calendarOptions = {
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
  },
  initialView: 'dayGridMonth',
  events: this.events,
  weekends: true,
  editable: true,
  selectable: true,
  selectMirror: true,
  dayMaxEvents: true,
  select: this.handleDateSelect.bind(this),
  eventClick: this.handleEventClick.bind(this),
  eventsSet: this.handleEvents.bind(this),
  /* you can update a remote database when these fire:*/
  //eventAdd: this.add(),
  //eventChange: this.change(),
  //eventRemove: this.remove()
  
};
 

}
}