Option to match the height of its parent container element in timegrid view

[apoklyak]

Hello, everyone!

I have 4 types of calendar views. There are “timeGridDay”, “timeGridWeek”, “dayGridMonth”, “listWeek” types.
And I have an issue with the height of the calendar for some types (“timeGridWeek” and “timeGridDay”).

My goal is to set the height of my calendar to 100%. And I have used your example for this https://fullcalendar.io/docs/full-height-demo. I have set the "parent" type.

It works fine for "dayGridMonth" type. Look at the screenshot https://i.gyazo.com/02dd0293a681ca8745fada3e3a227a4c.png

But it doesn’t work for “timeGridWeek” and “timeGridDay” types. Look at the screenshot
https://i.gyazo.com/1e8252a669162b70299ca470f1b6f441.png

I have an idea of how to fix it.
Look, you have set the height to table background, but forgotten about the table. https://i.gyazo.com/82fe675dd8f7e6f4c83bb1f5028de97e.mp4

What if you set the height to the table?
https://i.gyazo.com/5c85bd3d157d41f6d8b038debc7f3028.mp4
I would like to get some kind of similar solution.

Some dependencies:

        "@angular/animations": "^8.2.13",
        "@angular/cdk": "^8.2.3",
        "@angular/common": "^8.2.13",
        "@angular/compiler": "^8.2.13",
        "@angular/core": "^8.2.13",
        "@angular/flex-layout": "^8.0.0-beta.27",
        "@angular/forms": "^8.2.13",
        "@angular/material": "^8.2.3",
        "@angular/platform-browser": "^8.2.13",
        "@angular/platform-browser-dynamic": "^8.2.13",
        "@angular/platform-server": "^8.2.13",
        "@angular/pwa": "^0.803.18",
        "@angular/router": "^8.2.13",
        "@angular/service-worker": "^8.2.13",
        "@fullcalendar/angular": "^4.3.1",
        "@fullcalendar/core": "^4.3.1",
        "@fullcalendar/daygrid": "^4.3.0",
        "@fullcalendar/interaction": "^4.3.0",
        "@fullcalendar/list": "^4.3.0",
        "@fullcalendar/luxon": "^4.3.0",
        "@fullcalendar/resource-timegrid": "^4.3.0",
        "@fullcalendar/timegrid": "^4.3.0",
        "@ngrx/data": "^8.5.0",
        "@ngrx/effects": "^8.5.0",
        "@ngrx/entity": "^8.5.0",
        "@ngrx/router-store": "^8.5.0",
        "@ngrx/store": "^8.5.0",
        "core-js": "^3.4.0",
        "hammerjs": "^2.0.8",
        "luxon": "^1.21.1",
        "ngx-color": "^4.1.0",
        "rxjs": "~6.5.3",
        "zone.js": "~0.9.1"

My component:

<full-calendar
    #calendar
    (dayRender)="onDayRender($event)"
    [defaultView]="defaultGridView"
    [slotDuration]="slotDuration"
    [events]="calendarEvents$ | async"
    [firstDay]="firstDay"
    [header]="{
        left: null,
        center: null,
        right: null
    }"
    [plugins]="calendarPlugins"
    [weekends]="calendarWeekends"
    [resources]="calendarResources$ | async"
    schedulerLicenseKey="GPL-My-Project-Is-Open-Source"
    height="parent"
></full-calendar>

[acerix]

The height: 'parent' setting doesn't strech the cells to fit the height in timegrid as it does for daygrid but that could be useful as a new feature.

For now, you could add some CSS like in your videos to get that.

[apoklyak]

@acerix thanks for the answer! It will be great to get this feature in new versions.

What about CSS. Unfortunately, I can't set a certain height to table tag, because this height can be different (depends on device size).
Look at https://i.gyazo.com/c123dc8d7084ae325791bc2cc96e1373.mp4

But I will test it on the real devices a little later.

[apoklyak]

Guys, I have bought the license for 1 year. If it is possible, can you check this issue for the next release?

[arshaw]

Hi @apoklyak, there's already a ticket for having the slots expand in order to fit the available height:
#265
↑
Could you please visit the link, give a 👍 to vote (?), press the 🔈Subscribe button to receive updates?

Your twist is that it'd work in conjunction with height: 'parent', which it would definitely do if implemented.

Making this work would require a lot of work on our end. We want to move towards using flexbox to determine the heights of expanding elements such as this. But it would require a large HTML/CSS refactor of the project. And there's not really a "quick fix" available.

You could hack something together that changes the height of the slots based on a mediaquery in CSS. The height of each slot is determined by this CSS selector:

.fc-time-grid .fc-slats td { height: 1.5em }

What you could do is wrap it in a mediaquery and force it to be larger when the screen is larger. You'll have a difficult time making it fill the exact height of the window, but it's still better than nothing. Hope that helps.