angularfullcalendarangular5angular-calendar

How to change the width of ng-fullcalendar

I would like to manually change the width and the height. I can change the height and the aspect ratio in the calendar options:

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

But, I don't know how to change the width of the calendar

I also tried to put this in the CSS file:

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

But it didn't change anything.

EDIT:

Here is a stackblitz https://stackblitz.com/edit/ng-fullcalendar-demo?file=app%2Fapp.component.css

Solution

  • create new custom class

    I have create a demo on 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>