How to make the content of full calendar scrollable horizontally

I am using a full-calendar component from fullcalendar version ^6.1.8 on Angular 15, and I want to make the view of the calendar scrollable at certain widths above 500px, because on mobile, days look so thin.



I want the red box to be scrollable and the yellow part to stay the same, both come as a whole in this component.

<full-calendar *ngIf="calendarVisible" [options]="calendarOptions" #fullCalendar>
<ng-template #eventContent let-arg>
<span>
{{ arg.event.title }}
</ng-template>
</full-calendar>


I tried adding dayMinWidth to the calendar options here:

this.calendarOptions = {
plugins: [
interactionPlugin,
dayGridPlugin,
timeGridPlugin,
listPlugin,
],
headerToolbar: {
left: 'prev,next',
right: ''
},
dayMinWidth:'200'
/*
...other atttributes
*/
};
}


...But it gives me this error: No ScrollGrid implementation.

Is there any attribute to add that makes it scrollable horizontally at a certain width?

Continue reading...