Angular full calendar + bootstrap 4 - 我应该如何一起使用它们？

Question

我正在使用 Angular + Bootstrap 4 + 完整日历开发膳食计划器。布局是这样的： calendar layout

我的应用程序使用 Bootstrap，我想将我的日历放入容器 > 行 > col-7

能否指导我如何将完整日历包含到 angular + bootstrap 4 中？

我尝试了下面的方法，

WORKS - 只有 angular 完整日历 - 没有 bootstrap 4，没有插件 ： https://stackblitz.com/edit/angular-fullcalendar-j7fcji?
不起作用 - 日历的宽度和高度设置不正确：angular + bootstrap 4 - 无插件：这与 (1) 的代码相同，只是添加了 bootstrap 布局。 https://stackblitz.com/edit/angular-bootstrap-4-starter-sq9vpt?
抛出错误：angular + bootstrap 4 - 使用插件：https://stackblitz.com/edit/angular-bootstrap-4-starter-zkkafp?file=src/app/app.component.ts 我按照 https://fullcalendar.io/docs/bootstrap-theme.
上的说明进行操作

(1) 正是我想要的 - 但当我引入 bootstrap 容器、行和列时它会中断。

示例代码：

<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>

版本：Angular 2，完整日历：5.5.0，Bootstrap 4.5.2

注意：我也愿意使用其他日历。请随时将我引导至任何适用于 Angular + Bootstrap.

的响应式日历

Answer 1

您刚刚在 style.css 中缺少 @import '~@fullcalendar/core/main.css';。添加它，它会像魅力一样工作。

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

Angular full calendar + bootstrap 4 - 我应该如何一起使用它们？

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

fullcalendar

bootstrap-4

angular