Full calendar fit to container and hide scroll

问题

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/

回答1:

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.

回答2:

i just solved my problem with below code

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

回答3:

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 ;)

回答4:

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;

回答5:

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

With your desired minTime and maxTime this removes the vertical scroll bar on the content area of the FullCalendar in that jsfiddle example:

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

(But be sure not to set aspectRatio as that seems to over-ride the contentHeight)

Although as Karancan mentions to fit to one screen without scrolling you'll need to reduce the font size to an almost unreadable size.

(and if you're using IE8 then you may have other issues with the height..)

回答6:

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

来源：https://stackoverflow.com/questions/16533877/full-calendar-fit-to-container-and-hide-scroll

标签

javascript

jquery

fullcalendar