Angular full calendar + bootstrap 4 - how should I use them together?

Question

I am developing a meal planner using Angular + Bootstrap 4 + full calendar. The layout is like this: calendar layout

My application uses Bootstrap, I want to fit my calendar into container > row > col-7

Can you please guide me on how to include full calendar into angular + bootstrap 4?

I tried the below,

1. WORKS - just angular full calendar - no bootstrap 4, no plugin : https://stackblitz.com/edit/angular-fullcalendar-j7fcji ?

2. Doesn't work - Width and height of calendar not set correctly: angular + bootstrap 4 - no plugin : This is the same code as (1) with just bootstrap layout added. https://stackblitz.com/edit/angular-bootstrap-4-starter-sq9vpt ?

3. Throws an error: angular + bootstrap 4 - with plugin : https://stackblitz.com/edit/angular-bootstrap-4-starter-zkkafp?file=src/app/app.component.ts I followed the instructions on https://fullcalendar.io/docs/bootstrap-theme .

(1) is exactly what I want - but it breaks when I introduce bootstrap container, row and column.

SAMPLE CODE:

<div class="container">
<div class="row">
    <div class="col-md-4 border">
        <app-diet-type></app-diet-type>
    </div>
    <div class="col-md-7 border custom-cal-width">
        <h4 class="row justify-content-start py-md-4 pr-md-4 font-weight-bold font-italic">
            Step 2: Select date of delivery
        </h4>
        <app-full-calendar (dayClicked)="onDateSelect($event)"></app-full-calendar> --> THE CALENDAR SHOWS UP BUT ITS HEIGHT AND WIDTH IS NOT CORRECT
    </div>
</div>
<div class="row">
    <div class="col-md-11 border">
        <app-delivery-address></app-delivery-address>
    </div>
</div>

Versions: Angular 2, Full calendar: 5.5.0, Bootstrap 4.5.2

NOTE: I am open to using other calendars as well. Please feel free to direct me to any responsive calendar that works with Angular + Bootstrap.

Answer 1

You are just missing @import '~@fullcalendar/core/main.css'; in style.css . Add it and it will work like charm.

See https://stackblitz.com/edit/angular-bootstrap-4-starter-fnv8nh-ns