Search Posts

ngModal opened from fullcalendar not working properly

i have a simple angular 5 app with a angular2-fullcalendar.
What i’d like to do is to open a bootstrap modal on fullcalendar event click displaying the event details.
The problems is: calling

eventClick: (event, jsEvent, view)=>{
    this.openModal(event);
  }
openModal = function(event:Object){
    this.modalService.open(NgbdModalContent);
    ....
  }

will not load the modal in the right way, it will miss all css component and get loaded on the bottom of the page
not working modal

But if i call openModal from a normal button it will load in the right way.
working modal

this is the component (partial…)

@Component({
 selector: 'ngbd-modal-content',
 template: `
  <div class="modal-header">
    <h4 class="modal-title">Test title</h4>
    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>test description</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" 
(click)="activeModal.close('')">Close</button>
  </div>
  `
})
export class NgbdModalContent {
  @Input() evento;
  constructor(public activeModal: NgbActiveModal) {}
}
@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css']
})
export class CalendarComponent implements OnInit {

....

  constructor(private http: HttpClient, 
    private route: ActivatedRoute,
    private modalService: NgbModal) { 
    }
  ngOnInit() {
    this.calendarOptions = {
    fixedWeekCount : false,
    defaultDate: '2016-09-12',
    editable: true,
    eventLimit: true,
    eventClick: (event, jsEvent, view)=>{
      this.openModal(event);
    },
    header: {
      left: 'month agendaWeek agendaDay',
      center: 'title',
      right: ' prev today next'
    },
    events: [
      {
        title: 'All Day Event',
        start: '2016-09-01',
        tooltip: 'asvsdasdfasdfasd'
      },
      {
        title: 'Long Event',
        start: '2016-09-07',
        end: '2016-09-10',
        tooltip: 'asvsdasdfasdfasd'
          }
        ]
      };
    }
    openModal = function(event:Object){
      this.modalService.open(NgbdModalContent);
    }

this is the html:

<button (click)="calendarOptions.eventClick()">open dialog</button>
<angular2-fullcalendar [options]="calendarOptions"></angular2-fullcalendar>

inspecting the elements ngb-modal-window opened by eventClick don’t load the attribute class=”modal fade show”

thanks for help

Source: AngularJS

Leave a Reply

Your email address will not be published. Required fields are marked *