Reputation: 5341

Jquery Full Calendar Remove Scroll Bar

I Have the jquery full calendar in use, but im trying to get rid of the scroll bar. Ive tried setting the height, does not work.

Anyone have a fix (that they have used!, no links- I've tried most of them)?

I'm using:

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

Screen Shot

Page is big enough, just cant get the darn thing to go!

Upvotes: 22

Answers (12)

vinay mittal

Reputation: 94

Although its documentation says that auto option given for height and contentHeight works but only for versions above 2.1.0.

This code worked for me for any version:

.fc-scroller {
  height: auto !important;
}

Upvotes: 5

Naveen Gaur

Reputation: 461

Try this https://fullcalendar.io/docs/contentHeight contentHeight:"auto", is used for remove scroll bar

<script>

        jQuery('#calendar').fullCalendar({
         header: {
            left: 'prev',
            center: 'title',
            right: 'next'
        },
        defaultView: 'month',
        showNonCurrentDates:false,
        fixedWeekCount:false,
        contentHeight:"auto",
        handleWindowResize:true,
        themeSystem:'bootstrap3',

    });
</script>

Upvotes: 22

Will Knippelberg

Reputation: 121

you can use height: 'auto' to remove scrolls

$('#calendar').fullCalendar({
    height:'auto',
    ...
 });

Upvotes: 2

J.T. Houtenbos

Reputation: 956

As of version 2.1.0 height option can be set to 'auto'

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

This will remove the vertical scrollbar

Upvotes: 6

Harshana Lasith

Reputation: 11

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

Upvotes: 1

Maria

Reputation: 11

In fullcalendar version 2.7.1 this can be fixed commenting the lines with the call to the function that sets the overflows:

this.applyOverflow();

There are 2 functions calling this function: clear (around line 8855) and render (around line 8843)

Upvotes: 1

D-W

Reputation: 5341

I ended up using the a later version which solved the bug

Upvotes: 0

Adam Maloney

Reputation: 537

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

css:

#calendar {
   height:1000px;
}

js:

var calHeight = 1000;

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

Edit:

I found on refresh between views, caused it to show scroll when I don't want it to. Added this:

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

Upvotes: 13

K-Alex

Reputation: 380

Try this:

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

These 300 and 360 are an example, You can set them to whatever you'd like while the idea remains the same ..

Upvotes: 0

Edmond Chui

Reputation: 659

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

Upvotes: 0

Joseph Baker

Reputation: 47

You could try 2 things:

CSS: Wrap Calendar in div

div id{
overflow:hidden
}

JS:

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

Should fix you issue.

Upvotes: -2

Koala7

Reputation: 1404

Crete a div containing your calendar and then put in the css overflow-y:hidden;overflow-y:hidden;

div class="container-calendar"

.container-calendar {

overflow-x:hidden;
overflow-y:hidden;

}

Upvotes: 2

Jquery Full Calendar Remove Scroll Bar

Answers (12)

Related Questions