social-media/src/scheduler/scheduler.component.html

<div id="calendarContainer">
</div> 

<!-- Modal -->
<div id="event-modal" class="modal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">{{activeEvent.name}}</h4>
            </div>
            <div class="modal-body">
                <ng-content select="preview-template" *ngIf="!isEdit"></ng-content>
                <ng-content select="edit-template" *ngIf="isEdit"></ng-content>

                <div class="modal-footer">
                    <button type="button" (click)="editActiveEvent()" *ngIf="!isEdit" class="btn btn-success">Edit</button>
                    <button type="button" (click)="saveActiveEvent()" *ngIf="isEdit" class="btn btn-success">Save</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>