如何更改 ng-fullcalendar 的宽度答案

【问题标题】：How to change the width of ng-fullcalendar如何更改 ng-fullcalendar 的宽度
【发布时间】：2018-08-07 06:55:20
【问题描述】：

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

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

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

我也尝试将其放入 CSS 文件中：

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

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

编辑：

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

【问题讨论】：

标签： angular fullcalendar angular5 angular-calendar

【解决方案1】：

创建新的自定义类

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

【讨论】：

你知道我怎样才能只对桌面屏幕和任何其他屏幕进行此更改，宽度为 100% 且没有边距吗？
是的，您可以使用媒体 css。
你可以使用 import { NgZone } from '@angular/core'; // 在你的构造函数中注入 NgZone: constructor(private zone: NgZone) { } // 运行改变区域内状态的代码 matchMedia('(max-width: 400px)').addListener((mql => { if ( mql.matches) { this.zone.run(() => { this.myclass= 'toggled'; }); } }));

【解决方案2】：

在module中找到width属性后，可以添加这个属性：

例如：

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

【讨论】：

我试过了，还是不行。你可以在这里试试stackblitz.com/edit/…
永远不要使用 !important - 它会破坏样式优先级。如果您无法使用 .css 更改样式（并且您的选择器 100% 正确），则意味着您必须提供更具体的规则或使用 JS 更改属性。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

组件中没有ng-fullcalendar 类。您必须将样式应用于元素。可以看demohere。

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

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

【讨论】：