如何更改 ng-fullcalendar 的宽度

Question

我想手动更改宽度和高度。我可以在日历选项中更改高度和纵横比：

this.options = {
  height:700,
  aspectRatio:1.5}

但是，我不知道如何更改日历的宽度

我也试着把它放在 CSS 文件中：

.ng-fullcalendar{
   width:50%;
   margin-left: 300px;
 }

但这并没有改变任何东西。

编辑：

这是一个 stackblitz https://stackblitz.com/edit/ng-fullcalendar-demo?file=app%2Fapp.component.css

Answer 1

找到模块中的宽度属性后，可以添加属性:

例如：

.ng-fullcalendar {
   width: 50% !important;
   margin-left: 300px !important;
}

Answer 2

您可以将 css 样式应用于包含日历

的 div

<div style="width:50%"><ng-fullcalendar></ng-fullcalendar></div>

Answer 3

创建新自定义class

我已经在 Stackblitz

上创建了一个演示

.my-ng-fullcalendar{
   width:50%;
   margin-left: 300px;
 }



<div *ngIf="calendarOptions" class="my-ng-fullcalendar">
    <ng-fullcalendar #ucCalendar [options]="calendarOptions" (eventClick)="eventClick($event.detail)" (eventDrop)="updateEvent($event.detail)"
        (eventResize)="updateEvent($event.detail)" (clickButton)="clickButton($event.detail)"></ng-fullcalendar>
</div>

Answer 4

组件中没有ng-fullcalendarclass。您必须将样式应用于元素。可以看demo here.

基本上你必须应用以下样式。

ng-fullcalendar {
    position: absolute;
    width: 50%;
    margin-left: 300px;
}

如何更改 ng-fullcalendar 的宽度

How to change the width of ng-fullcalendar

fullcalendar

angular

angular5

angular-calendar