Как обновить события в FullCalendar с помощью NgOnChanges? - PullRequest
Новая
       26

Как обновить события в FullCalendar с помощью NgOnChanges?

0 голосов
/ 10 июля 2019

Я работаю над приложением для бронирования номеров на Angular 7.

Я использую полный календарь для отображения событий из базы данных.

FullCalendar работает хорошо для одной комнаты, нокаждый раз, когда я переключаюсь из другой комнаты, он инициализирует другой Календарь.

Мой код выглядит следующим образом. 

 ngOnChanges(changes: any) {

    this.getAllReservations();
    
  }

public getAllReservations() {

    let apiUrl: string = `api/Reservations/Room=${this.selection}`;
    this.repository.getData(apiUrl).subscribe(res => {
      this.Reservations = res as Reservation[];

      //full calendar intit
      var calendarEl = document.getElementById('calendar');
      var calendar = new Calendar(calendarEl, {
        
        events: this.Reservations.map(function (x) { 
          return {
            title: x.Note,
            start: x.StartDate,
            end: x.EndDate
          };
        }),
      });     
      calendar.render();
      },
      (error) => {
        this.errorHandler.handleError(error);
        this.errorMessage = this.errorHandler.errorMessage;
      })
  }

Я повторяю, этот код работает хорошо, я получаю свои события.=> Доказательство .

Но это создает новый календарь ниже каждый раз, когда я называю комнату, и это моя проблема.

И я полностью понимаю, но не могунайти решение, чтобы решить мою проблему.Я пытался изолировать Календарь в ngOnInit и обновлять только события, но функция events не находит Календарь.

Ответы [ 2 ]

0 голосов
/ 11 июля 2019

Я решил мою проблему с этим: 

 getAllReservations() {
    let apiUrl: string = `api/Reservations/Room=${this.selection}`;
    this.repository.getData(apiUrl).subscribe(res => {
      this.Reservations = res as Reservation[];      
    this.calendar.getEvents().map(function(x){
      x.remove();
    });     
      for (var i = 0; i < this.Reservations.length; i++){
        var x = this.Reservations[i];
        this.calendar.addEvent({
          title: x.Note,
          start: x.StartDate,
          end: x.EndDate
        });
      }    
       
    }),
      (error) => {
        this.errorHandler.handleError(error);
        this.errorMessage = this.errorHandler.errorMessage;
      }
  }
}

Я сделал цикл, в котором перечислил все свои бронирования, затем добавил события в календарь.

В любом случае, спасибо Лео ПУПЕТ из E-Liberty.

0 голосов
/ 10 июля 2019

Хорошо, Кристоф Сакки, если я предполагаю, что вы получаете бронирование только на одну комнату с вашим API, это нормально.Вы должны объединить все бронирования для каждой комнаты: 

public getAllReservations() {
  this.Reservations = [];
  rooms.map(room => {
    const apiUrl: string = `api/Reservations/Room=${room}`;
    const roomReservations = this.repository.getData(apiUrl).subscribe(res => res as Reservation[],
      (error) => {
        this.errorHandler.handleError(error);
        this.errorMessage = this.errorHandler.errorMessage;
      });
    this.Reservations.push(roomReservations);
  });

  //full calendar intit
  const calendarEl = document.getElementById('calendar');
  const calendar = new Calendar(calendarEl, {
    events: this.Reservations.map(roomReservations => roomReservations.map(reservation => ({
        title: reservation.Note,
        start: reservation.StartDate,
        end: reservation.EndDate
      })),
    ),
  });
  calendar.render();
}

Если вы попробуете что-то подобное (сделано без тестирования, поэтому вам, возможно, придется немного его обновить), это работает?

Я не угловой разработчик, извините.

...