Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Evenly expand timeGrid slots to fit height #265

Open
M0nter0 opened this issue Aug 12, 2015 · 11 comments
Open

Evenly expand timeGrid slots to fit height #265

M0nter0 opened this issue Aug 12, 2015 · 11 comments

Comments

@M0nter0
Copy link

@M0nter0 M0nter0 commented Aug 12, 2015

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.

@M0nter0

This comment has been minimized.

Copy link
Author

@M0nter0 M0nter0 commented Aug 12, 2015

It's neccessary to add to .fc-slats > table the height of the difference at bottom, so we need to avoid the size of headers, toolbars, custom elements etc, that can vary based on your customize settings or styles. Setting content table height to container height will overflow the container.

enter image description here

The difference at bottom can be obtained like:

var bottomContainerPos = $('#container')[0].getBoundingClientRect().bottom;
var bottomTablePos = $('.fc-slats')[0].getBoundingClientRect().bottom;
var bottomDifference = bottomContainerPos - bottomTablePos ;

And now we can add the difference to the actual height:

 var newHeight = parseInt(currentHeight) + bottomDifference;
 $( ".fc-slats > table" ).css( "height", newHeight );

Still some pixels could appear below due to table borders.

You can check it in this plnkr

@M0nter0 M0nter0 closed this Aug 12, 2015
@M0nter0

This comment has been minimized.

Copy link
Author

@M0nter0 M0nter0 commented Aug 12, 2015

Reopen

When modifying the table style, the slots are still created based on the default row size, so adding events will not be aligned to its hours as you can check adding any event to this proposal. Plnkr to reproduce it with events

@M0nter0 M0nter0 reopened this Aug 12, 2015
@arshaw arshaw added the Accepted label Oct 11, 2015
@arshaw arshaw changed the title Fit calendar to container Evenly expand agenda slots to fit height Oct 11, 2015
@kylethielk

This comment has been minimized.

Copy link

@kylethielk kylethielk commented Nov 11, 2015

I realize this is a new feature request but upgrading from 2.0.2 to 2.4 it was quite the shock to see this 'gutter' appear at the bottom of the calendar when it was not previously there.

I think in the meantime it at least makes sense to be consistent. In 2.0.2 if aspectRatio was set to a value (height is left unset as is contentHeight) that resulted in the calendar being taller than the height of the slats, the calendar height would simply be truncated.

I am currently forcing this behavior by adding the following code immediately after initializing the calendar:

var slatHeight = $("#calendar").find('.fc-slats').height();
var height = $('#calendar').find('.fc-time-grid-container').height();
if(slatHeight < height)
{
    $('#calendar').find('.fc-time-grid-container').css('max-height',slatHeight+'px');
}
@fpalluel

This comment has been minimized.

Copy link

@fpalluel fpalluel commented Apr 11, 2017

Hello,
Sorry to revive this discussion, but is there a way (hack ?) to both make the slots height adapt to calendar height, AND make the events align to those slots ?
Thanks !

@DonovanCharpin

This comment has been minimized.

Copy link

@DonovanCharpin DonovanCharpin commented Apr 28, 2017

Hi guys!

I ran into the same issue. I found another way to manage it. I'm using React but you could find where you can add this piece of code (on my side componentDidUpdate because I get the events asynchronously and the component re-render):

    window.dispatchEvent(new Event('resize'));

Fullcalendar is listening for this resize event so when it's called, fullcalendar seems to rerender the calendar and the events are moved to the right position. It works perfectly on my side and it's not too heavy.

@Anton-V-K

This comment has been minimized.

Copy link

@Anton-V-K Anton-V-K commented Dec 24, 2017

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

@hectorvent

This comment has been minimized.

Copy link

@hectorvent hectorvent commented Jan 16, 2018

@Anton-V-K Thanks man.

@EoghanH

This comment has been minimized.

Copy link

@EoghanH EoghanH commented Mar 26, 2018

@Anton-V-K indeed it does, but the problem is that if you switch back to say, agendaWeek or month view, it then relies on contentHeight being auto - and it creates a gigantic table.

Docs on https://fullcalendar.io/docs/contentHeight are pretty useless in giving details on what contentHeight defaults to (only stating it uses aspectratio to 'calculate' the contentHeight) - is there any function we can call to set back to the default contentHeight after defaulting to "auto"?

@soimudaniel

This comment has been minimized.

Copy link

@soimudaniel soimudaniel commented Sep 30, 2018

Hello to everyone. My solution was to just increase the .fc-time-grid .fc-slats td height in css from 1.5em to 2.2em. It worked like a charm. Also added contentHeight: 'auto' like @Anton-V-K said.

screen shot 2018-10-01 at 2 32 26 am

@AlexShafir

This comment has been minimized.

Copy link

@AlexShafir AlexShafir commented Apr 24, 2019

Current status?

@arshaw arshaw changed the title Evenly expand agenda slots to fit height Evenly expand timeGrid slots to fit height Jul 29, 2019
@arshaw

This comment has been minimized.

Copy link
Member

@arshaw arshaw commented Feb 5, 2020

If you're curious to know, this will be included in v5 (currently in-development)
blog post: https://fullcalendar.io/blog/2020/02/changes-in-the-upcoming-v5

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
10 participants
You can’t perform that action at this time.