Angular Full Calendar For add ng-Bootstrap modal popup

问题

I'm used my university project for Angular Full Calendar , I want t o know how to added Calendar event for Modal popup look my image , calendar is working good, but I don't know how to add Modal popup for this event,

please help me this? Thanks

I want to know how to add that event to ng-bootstrap-Modal

This is my code ,

index.component.ts

export class IndexComponent {

 calendarOptions:Object = {
height: 'parent',
fixedWeekCount : false,
defaultDate: '2016-09-12',
editable: true,
eventLimit: true, // allow "more" link when too many events

events: [
  {
    title: 'All Day Event',
    start: '2016-09-01'
  },

  {
    id: 999,
    title: 'Repeating Event',
    start: '2016-09-09T16:00:00'
  },
  }

index.component.html

<div class="container-fluid">
  <div class="calendar">
    <angular2-fullcalendar [options]="calendarOptions" (initialized)="onCalendarInit($event)"></angular2-fullcalendar>
  </div>
</div>

回答1:

This can be done with bootstrap, say ngx-bootstrap, modal.

Here's a link for using ngx-bootstrap modal: ngx-bootstrap-how-to-open-a-modal-from-another-component

You use eventClick to launch the modal:

eventClick(model: any) {
    // this is used to pass event data to modal component
    const initialState = { apptEvent: model.event};

    this.bsModalRef = 
         this.modalService.show(ModalComponent, 
            Object.assign({}, this.modalConfig, { class: 'modal-md', 
            initialState }));

    this.bsModalRef.content.onClose.subscribe(result => {
         // close the modal
         this.bsModalRef.hide();
    })

};

The ModalComponent will use the event data to render the view.

来源：https://stackoverflow.com/questions/47924268/angular-full-calendar-for-add-ng-bootstrap-modal-popup

标签

angular

fullcalendar

ng-bootstrap