JQuery Full Calendar Remove Scroll Bar

Question

I have a complete jquery calendar, but I'm trying to get rid of the scrollbar. Ive tried to set the height, not working.

Does anyone have a fix (what they used !, no links - I tried most of them)?

I use:

$('#calendar').fullCalendar({ firstDay: 1, minTime:@Model.MinHour, maxTime:@Model.MaxHour}) 

The page is large enough, it just won’t work out so that everything is in order!

Answer 1

I set height and contentHeight to the same value and it seems to do the trick.

CSS

 #calendar { height:1000px; } 

JS:

 var calHeight = 1000; $('#calendar').fullCalendar({ height:calHeight, contentHeight:calHeight }); 

Edit:

I found that when updating between views, it displayed a scroll when I don't want it. Added:

 .fc-scroller { overflow-y: hidden !important; } 

Answer 2

Starting from version 2.1.0, the height parameter can be set to "auto"

https://fullcalendar.io/docs/display/height/

This will remove the vertical scrollbar.

Answer 3

Crete a div containing your calendar, and then type css overflow-y:hidden;overflow-y:hidden;

 div class="container-calendar" .container-calendar { overflow-x:hidden; overflow-y:hidden; } 

Answer 4

You can try expanding the calender width to make the scroll bar on the right side of the viewport, and then set overflow-x: hidden for the containing element.

Answer 5

Try the following:

 $(document).ready(function () { $('#calendar').fullCalendar({ height: 300, contentHeight: 360, }); }); 

These 300 and 360 are examples, you can customize them to whatever you want until the idea changes.

Answer 6

I ended up using a later version that resolved the error

Answer 7

In fullcalendar version 2.7.1, this can be fixed by commenting out lines with a function call that sets overflows:

 this.applyOverflow(); 

There are two functions that call this function: clear (around line 8855) and rendering (around line 8843)

Answer 8

 $('.fullCalendar').fullCalendar({ aspectRatio: 1.605, -> this works for me 

Answer 9

You can try 2 things:

CSS: Wrap Calendar in div

 div id{ overflow:hidden } 

JS:

 $('#calendar').height($(window).height()); 

Should fix your problem.