Angular Full Calendar For add ng-Bootstrap modal popup

Question

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>

can you reproduce this in stackblitz it hard to figure out the requirement — Rahul Singh, Dec 21 '17 at 11:50
@RahulSingh Sir updated, I want to know how to add modal popup correctly for that event part `events: [ { id: '1', resourceId: 'a', start: '2017-12-01',end: '2017-12-07', title: 'Mahesh' }, ],` — core114, Dec 21 '17 at 11:55
sir its hard to figure out , do you want to have the model open on selecting the date in the calendar ? — Rahul Singh, Dec 21 '17 at 11:56
@RahulSingh yes, sir when I click on the event i want to know how to show modal popup,I m already do that in html, but i dont know how to do that using Angular — core114, Dec 21 '17 at 11:58
can you please replicate this calendar in stacblitz i will add it up there — Rahul Singh, Dec 21 '17 at 12:04
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/161722/discussion-between-core114-and-rahul-singh). — core114, Dec 21 '17 at 12:09

score 0 · Answer 1 · edited Jun 06 '18 at 01:17

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.

Angular Full Calendar For add ng-Bootstrap modal popup

1 Answers1

Linked