Angular Full Calendar用于添加ng-Bootstrap模态弹出窗口 [英] Angular Full Calendar For add ng-Bootstrap modal popup

问题描述

我将我的大学项目用于Angular Full Calendar，我想知道如何为Modal弹出窗口添加Calendar事件，我的图像，日历工作正常，但是我不知道如何为该事件添加Modal弹出窗口，

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

我想知道如何将事件添加到 ng-bootstrap-Modal

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

这是我的代码，

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>

推荐答案

这可以使用引导程序(例如ngx-bootstrap模态)来完成.

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

以下是使用ngx-bootstrap模态的链接: ngx-bootstrap如何从另一个组件打开一个模式

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

您使用eventClick启动模式:

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();
    })

};

ModalComponent将使用事件数据来呈现视图.

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

这篇关于Angular Full Calendar用于添加ng-Bootstrap模态弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！