Angular Full Calendar + Bootstrap 4-我应该如何一起使用它们? [英] Angular full calendar + bootstrap 4 - how should I use them together?

问题描述

我正在使用Angular + Bootstrap 4 +完整日历来开发膳食计划器.布局是这样的:

请参见 https://stackblitz.com/edit/angular-bootstrap-4-starter-fnv8nh-ns

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.

解决方案

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

这篇关于Angular Full Calendar + Bootstrap 4-我应该如何一起使用它们?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！