Evenly expand timeGrid slots to fit height
See original GitHub issueThis 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:
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:
- Created 8 years ago
- Reactions:12
- Comments:15 (3 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Adding
contentHeight: 'auto'
effectively removes bottom empty row in week agenda view (in 3.8.0).This has been released in v5-beta. Please read the latest blog post
You set expandRows to
true
. That docs article also contains demos.