question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Evenly expand timeGrid slots to fit height

See original GitHub issue

This comes from Fit calendar to container stackoverflow question


I’m trying to make the fullcalendar fitting on the container without success. I’ve been modifying contentHeight, height and aspectRatio without results.

contentHeight:'auto' is working fine if container is not bigger than the content, displaying scrollbars.

Best calendar configuration I got looks like:

$('#calendar').fullCalendar({
   header: {
            left: '',
            center: '',
            right: ''
        },
    defaultView:'agendaWeek',
    contentHeight:'auto',       //auto
    slotDuration: '00:60:00',        
});

If I get dynamically the size and I set it:

$('#calendar').fullCalendar({
       header: {
                left: '',
                center: '',
                right: ''
            },
        defaultView:'agendaWeek',
        contentHeight:766,     //specific height instead of auto
        slotDuration: '00:60:00',        
    });

The calendar expands, but only the last row, displaying an ugly last row like instead of increasing each row to fit the content. It looks like the following:

Last row with fixed contentHeight

Is it possible to ‘maximize’ the calendar to fit the container?

I did a plnkr where you can reproduce/fork it.

Note: I can’t resize the container and the container height is dynamic.

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Reactions:12
  • Comments:15 (3 by maintainers)

github_iconTop GitHub Comments

20reactions
Anton-V-Kcommented, Dec 24, 2017

Adding contentHeight: 'auto' effectively removes bottom empty row in week agenda view (in 3.8.0).

6reactions
arshawcommented, Apr 14, 2020

This has been released in v5-beta. Please read the latest blog post

You set expandRows to true. That docs article also contains demos.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Developers - Evenly expand timeGrid slots to fit height -
I'm trying to make the fullcalendar fitting on the container without success. I've been modifying contentHeight , height and aspectRatio without results.
Read more >
Fullcalendar V5 How to adjust time slot height? - Stack Overflow
use css .fc-timegrid-slot { height: 30px !important }. replace 30px with the size you want.
Read more >
Full calendar agenda slot height, fullcalendar height not working ...
Fit calendar to container evenly expand agenda slots to fit height on oct 10,. With online sign ups, parents select from your available...
Read more >
Show Events With Its Correct Time (Not The Time Slot) In ...
Adjust height of time slots depending slotDuration #5603. ... long as it is distributed evenly across the map. pooling to better fit the...
Read more >
Docs TimeGrid View - FullCalendar
The two predefined TimeGrid views are the timeGridWeek and timeGridDay views. ... of a given view don't take up the entire height, they...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found