ngx-bootstrap의modal과 g-fullcallendar를 병용할 때 발생하는 문제

안녕하세요, 저는 BBG의맑은 물입니다.
ngx-bootstrap의modal과ng-fullcallendar를 병용할 때 발생하는 문제를 이야기합니다.
하고 싶은 일

Anglar 애플리케이션에 표시되는 달력fullcalendar

ngx-bootstrap의modal에 달력을 표시하기를 원합니다

컨디션
- Angular: 6.0.0
- jquery: ^3.2.1
- ngx-bootstrap: ^3.1.3
- fullcalendar: 3.6.1
- ng-fullcalendar: ^1.7.1
Anglar에서 사용할 수 있는 calendar 라이브러리를 찾고 있는데 다음 두 개를 발견했습니다.
- ng-fullcalendar
- angular-calendar
angular-callendar가 더 인기가 많아요? 그렇게 생각하지만
이번에는fullcallendar가 제작한 달력의 리메이크판이므로ng-fullcalendar기용되었다.
g-fullcallendar로 보세요.
소스 코드는 이런 느낌입니다.(install은 docs에서 기다리기 때문에 생략합니다.)
html

<div bsModal #modal="bs-modal" class="modal" role="dialog">
  <div class="modal-dialog">
    <div class="fullcalendar-content" *ngIf="calendarOptions">
    <div class="fullcalendar-header">
      ...
    </div>
    <ng-fullcalendar [options]="calendarOptions" ... >
    </ng-fullcalendar>
  </div>
</div>

ts

import { Component, OnInit } from '@angular/core';
import { CalendarComponent } from 'ng-fullcalendar';
import { Options } from 'fullcalendar';

@Component({ ... })
export class CalendarComponent implements OnInit {
  calendarOptions: Options;

  constructor(){}

  ngOnInit() {
    this.calendarOptions = {
      allDayText: '終日',
      contentHeight: 600,
      editable: true,
      eventLimit: false,
      events: [],
      firstDay: 0,
      header: false,
      locale: 'ja',
      slotLabelFormat: 'H:mm',
      selectable: true,
      timeFormat: 'H:mm',
      views: {
        month: {
          columnFormat: 'ddd',
          titleFormat: 'YYYY年MM月',
        },
        week: {
          columnFormat: 'MM/DD（ddd）',
          titleFormat: 'YYYY年MM月DD日',
        },
        day: {
          columnFormat: 'MM/DD（ddd）',
          titleFormat: 'YYYY年MM月DD日（ddd）',
        },
      },
    };
  }
}

달력 헤더를 사용자 정의하고 싶어서 기본적으로 가짜로 표시됩니다.
문제가 생겼어요.

모드를 열면 날짜 영역을 표시할 수 없습니다
모태 이외로 기대하는 동작을 했다.
이것은 bootstratrapt와fullcallendar가 함께 사용할 때 발생하는fullcallendar의 버그인 것 같습니다.
bootstrap의 다른 모듈에fullcallendar를 표시할 때 같은 현상이 발생한다는 말도 있다.
해결하다
bootstrap의module를 표시한 후 달력을 표시하면 ModalModule의onShown를 다음과 같이 수정할 수 있습니다.
ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { CalendarComponent } from 'ng-fullcalendar';
import { Options } from 'fullcalendar';
import { ModalDirective } from 'ngx-bootstrap/modal';

@Component({ ... })
export class CalendarComponent implements OnInit {
  calendarOptions: Options;
  @ViewChild('modal') modal: ModalDirective;

  constructor(){}

  ngOnInit() {
    this.modal.onShown.subscribe(() => {
      this.calendarOptions = { ... };
    });
  }
}

축하합니다!

끝맺다
g-fullcallendar에서fullcallendar의 달력은 간단하게 사용할 수 있습니다.
다만, boootstrap과 함께 사용하면 버그가 발생할 수 있고, Anugular7 이후에는 대응이 없기 때문에 앞으로 Anglar 버전에 주목할 예정이다.angular-calendar 다음에도 한번 만져보고 싶어요!