<table class="calendar">
<thead>
<tr>
  <th class="day-of-week">Monday</th>
  <th class="day-of-week">Tuesday</th>
  <th class="day-of-week">Wednesday</th>
  <th class="day-of-week">Thursday</th>
  <th class="day-of-week">Friday</th>
  <th class="day-of-week">Saturday</th>
  <th class="day-of-week">Sunday</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let week of weeks">
  <td *ngFor="let day of week" class="day-of-month">
    <div class="events">
      <span class="day-number">{{ day | date:'d' }}</span>
    </div>
  </td>
</tr>
</tbody>

<ng-template #content let-modal>
  <div class="modal-header">
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
  <span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
 <form>
  <div class="form-group">
    <label for="event">Write your event here</label>
    <div class="input-group">
      <input id="event" class="form-control" placeholder="Description">
    </div>
  </div>
</form>
</div>
<div class="modal-footer">
 <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
</div>
</ng-template>

<button type="button" (click)="open(content)">Add event</button>

import {Component} from '@angular/core';

import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

@Component({
 selector: 'ngbd-modal-basic',
 templateUrl: './modal.component.html'
})
export class NgbdModalBasic {
closeResult: string;

constructor(private modalService: NgbModal) {}

open(content) {
this.modalService.open(content, {ariaLabelledBy: 'modal-title'}).result.then((result) => {
  this.closeResult = `Closed with: ${result}`;
}, (reason) => {
  this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}

private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
  return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
  return 'by clicking on a backdrop';
} else {
  return  `with: ${reason}`;
}
}
}