如何更改ng-fullcalendar的宽度

时间:2018-08-07 06:55:20

标签: angular fullcalendar angular5 angular-calendar

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

function delete($id)
{ 
    $this->db->where('id',$id);
    $this->db->delete('employees');
    return $this->db->affected_rows();
}

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

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

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

但是它并没有改变任何东西。

编辑:

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

4 个答案:

答案 0 :(得分:1)

在模块中找到width属性之后,您可以添加以下属性:

例如:

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

答案 1 :(得分:1)

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

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

答案 2 :(得分: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>

答案 3 :(得分:1)

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

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

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