Jquery完整日历删除滚动条

时间:2012-09-14 17:25:55

标签: jquery fullcalendar

我正在使用jquery完整日历,但我试图摆脱滚动条。 我试过设置高度,不起作用。

任何人都有修复(他们已经使用过!,没有链接 - 我已经尝试了大部分内容)?

我正在使用:

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

Screen Shot

页面足够大,只是无法得到令人难忘的事情!

12 个答案:

答案 0 :(得分:10)

我将height和contentHeight设置为相同的值,似乎已经完成了这个技巧。

的CSS:

#calendar {
   height:1000px;
}

JS:

var calHeight = 1000;

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

修改

我发现视图之间的刷新,导致它在我不想要时显示滚动。 补充一点:

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

答案 1 :(得分:6)

从版本2.1.0开始,高度选项可以设置为“自动”

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

这将删除垂直滚动条

答案 2 :(得分:2)

尝试这个https://fullcalendar.io/docs/contentHeight     contentHeight:“自动”,用于删除滚动条

<script>

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

    });
</script>

答案 3 :(得分:1)

克里特包含您的日历的div,然后放入css overflow-y:hidden;overflow-y:hidden;

div class="container-calendar"

.container-calendar {

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

}

答案 4 :(得分:1)

在fullcalendar版本2.7.1中,可以通过调用设置溢出的函数来修复这些行:

this.applyOverflow();

有两个函数调用此函数:clear(在第8855行附近)和render(在第8843行附近)

答案 5 :(得分:0)

您可以尝试展开日历的宽度以使滚动条离开视口的右侧,然后为包含元素设置overflow-x:hidden。

答案 6 :(得分:0)

试试这个:

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

这些300和360就是一个例子,您可以将它们设置为您想要的任何内容,而这个想法保持不变。

答案 7 :(得分:0)

我最终使用了解决了这个bug的更高版本

答案 8 :(得分:0)

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

答案 9 :(得分:0)

您可以使用height: 'auto'删除滚动条

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

答案 10 :(得分:0)

尽管其文档指出,heightcontentHeightauto选项有效,但仅适用于2.1.0以上的版本。

此代码适用于任何版本:

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

答案 11 :(得分:-2)

你可以尝试两件事:

CSS:在div中包装日历

div id{
overflow:hidden
}

JS:

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

应该解决你的问题。