首页 文章

JQuery fullcalendar：无法为agendaWeek或agendaDay模式设置高度

提问于
浏览 次
1

我尝试在fullCalendar中为agendaWeek视图设置高度 . 最终目标是使日历适合用户的窗口，并使fullcalendar使用最大可用位置而不使用滚动条 .

事实是文档显示了height或contentHeight选项，但这对agendaWeek或agendaDay视图中的计算高度没有影响 .

这是一个例子jsfiddle

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

$('#calendar').fullCalendar({
    defaultView: "agendaWeek",
    height: 2500,
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    editable: true,
    events: [
        {
            title: 'All Day Event',
            start: new Date(y, m, 1)
        },
        {
            title: 'Long Event',
            start: new Date(y, m, d-5),
            end: new Date(y, m, d-2)
        },
        {
            id: 999,
            title: 'Repeating Event',
            start: new Date(y, m, d-3, 16, 0),
            allDay: false
        },
        {
            id: 999,
            title: 'Repeating Event',
            start: new Date(y, m, d+4, 16, 0),
            allDay: false
        },
        {
            title: 'Meeting',
            start: new Date(y, m, d, 10, 30),
            allDay: false
        },
        {
            title: 'Lunch',
            start: new Date(y, m, d, 12, 0),
            end: new Date(y, m, d, 14, 0),
            allDay: false
        },
        {
            title: 'Birthday Party',
            start: new Date(y, m, d+1, 19, 0),
            end: new Date(y, m, d+1, 22, 30),
            allDay: false
        },
        {
            title: 'Click for Google',
            start: new Date(y, m, 28),
            end: new Date(y, m, 29),
            url: 'http://google.com/'
        }
    ]
});

我试图理解jquery.fullcalendar如何在这些模式中设置高度但无法找到解决方案 . 我也尝试通过CSS动态调整强度高度

var view = $("#calendar").fullCalendar("getView");
if(view.name == 'agendaWeek' || view.name == 'agendaDay')
    $("table.fc-agenda-slots td > div").height(Math.floor((toHeight-50)/24)-1);

但是在切换视图时会导致错误（某些开关上会出现滚动条）

你有好主意吗 ？

jquery height fullcalendar

1 回答

  • 1

    好的，我找到了一个解决方法，感谢报告的其他问题，如this one

    我默认在agendaWeek视图中加载fullCalendar，然后使用basic在viewRender选项中调整宽度

    $("#calendar").width(myWidth);

    列宽是错误的，我需要执行一次

    $("#calendar").fullCalendar("render");

    然后我用'脏'调整高度

    $("table.fc-agenda-slots td > div").height(Math.floor((toHeight-50)/24)-1);

    toHeight是日历的可用高度，50是日历 Headers 的大约，我在议程视图中显示的24行数和1个调整

    此时，滚动条显示在议程视图中，所以我应用Sinetheta的技巧（参见上面的链接），我选择应用它：

    view.setHeight(9999);

    这个技巧会导致月视图出现问题，所以整个技巧看起来像这样

    var view = $("#calendar").fullCalendar("getView");
if(view.name == 'agendaWeek' || view.name == 'agendaDay')
{
    $("table.fc-agenda-slots td > div").height(Math.floor((toHeight-50)/24)-1); // 50: approx header height, 24: number of rows in agenda view (I only display from 7am to 19pm)
    view.setHeight(9999); // Get rid of scrollbar
}
if(view.name == 'month')
{
    $("tr.fc-week td > div").css("min-height", "");
    $("tr.fc-week td > div").height(Math.floor((toHeight-50)/6)-1); // 50: approx header height, 6: number of rows in month view
}

    我发现这个技巧有点难看，我猜它可以通过获得真正的 Headers 高度和行数来改进，但无论如何它都有效

    注意：这个技巧包含在我在fullCalendar中的viewRender函数中执行的calendarResize函数中

    回复于

相关问题