A full calendar fits the container and hides the scroll

Question

I cannot figure out how to scale fullcalendar to fit this parent container. I want to display a weekly view on one page for users without the need for scrolling (so they quickly view items in a week).

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

Answer 1

There are several factors.

If you want to stick to slotMinutes set to 10, then it will be quite difficult to select the time ranges from 8:00 to 22:00 on the page without manually breaking the font so that it is almost illegible.

If you agree to increase the slotMinutes attribute by something like 30 or even 60, you have a good chance of getting your weekly view without having to scroll.

In addition, there are two properties that can be used to influence the size of a calendar. The first is height . However, this sets the pixel value, which does not scale dynamically. The second is aspectRatio , which allows you to determine the ratio of width to height. In other words, an aspectRatio value of 2 means that it will try to stretch a height that will be twice as large as the width (if so much height is required at all).

Here I gave an example that shows the effect of the reasonable value of slotMinutes . In my opinion, this is what will be most important to achieve what you need.

Answer 2

I just solved my problem using the code below

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

Answer 3

Hi, I use two views (month and agenda), and when I switch to day mode, I change the contentHeight like this:

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

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

Answer 4

I use it as a list to show all upcoming events. I added my own CSS -

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

Answer 5

Try the contentHeight property: http://arshaw.com/fullcalendar/docs/display/contentHeight/

If desired, minTime and maxTime this removes the vertical scroll bar in the FullCalendar content area in this jsfiddle example:

 contentHeight: 1850, minTime: '8', maxTime: '22', 

(But be sure not to set aspectRatio as it seems like overuse of contentHeight)

Although, as Karancan notes, to fit a single screen without scrolling, you need to reduce the font size to an almost unreadable size.

(and if you are using IE8, then you may have other height issues.)

Answer 6

It worked for me too. I opened fullcalendar.css and scrolled fc-scroller. Added height and changed the overflow-y option as suggested. And viewing the calendar month worked 100%