Full calendar fit to container and hide scroll

Question

I cannot figure out how to scale fullcalendar to fit to it's parent container. I want to display week view on a single page for users without need to scroll (So they quickly review items for a week).

I'm ok if I need to make text small, slots height smaller, etc, but I just not sure how to do this dynamically based on the size of the browser window.
(In my calendar I'm using slotMinutes:10 and times from 8am to 10pm)
jsfiddle with fullcalendar: http://jsfiddle.net/bQXYp/27/

Answer 1

i just solved my problem with below code

.fc-day-grid-container.fc-scroller {
    height: auto!important;
    overflow-y: auto;
}

Answer 2

There are several factors to be considered.

If you want to stick to having slotMinutes set to 10, then it is going to be quite difficult to fit time ranges from 8 AM to 10 PM on to the page without manually hacking the font size to be almost illegible.

If you are okay with increasing the slotMinutes attribute to something like 30 or even 60, you have a pretty good chance of getting your weekly view showing up without the need to scroll.

Apart from that, there are two properties you could use to influence the dimensions of the calendar. The first one is height. However this sets a pixel value which does not scale dynamically. The second one is aspectRatio which allows to the define the ratio of width to height. In other words, aspectRatio value of 2 means that it will try and stretch the height to be double that of the width (if at all that amount of height is needed).

I have set up an example here that shows you the effect of having a reasonable slotMinutes value. In my opinion, this is what will be most important to be able to achieve what you need.

Answer 3

I use it in list view to show all upcoming events. I added to my own CSS-

.fc-scroller {
height: auto!important;
overflow-y: auto;

Answer 4

Hi i am using two views ( month and agendaDay ) and when i switch to day view i change contentHeight like so:

viewDisplay: function(view) {  
       //alert(view.name)   
            if(view.name == 'agendaDay')
            {
                $('#calendar').fullCalendar('option', 'contentHeight', 700);                        
            }else{
                $('#calendar').fullCalendar('option', 'contentHeight', 200);
   }
 }

Maybe it can give some direction for what you want to do ;)