Question

如何在fullcalendar中设置行的固定高度？如果事件太多，我想要有垂直滚动条。

$('#calendar').fullCalendar('option', 'contentHeight', 50);

Answer 1

对我来说只有这个有效

.fc-agendaWeek-view tr {
    height: 40px;
}

.fc-agendaDay-view tr {
    height: 40px;
}

Answer 2

如果要更改每个时隙行的高度，可以覆盖css类。

.fc-agenda-slots td div {
     height: 40px !important;
}

如果您的意思是其他，请告诉我们。

contentHeight仅用于计算日历的高度。

Answer 3

在我的脚本中，我想让行变小，但是你可以使用相同的代码来使它们更大。当使行变小时，我必须合并第一列的每4个单元格（当以15分钟的粒度工作时）以使小时指示适合单元格。使用以下代码合并单元格：

$(function(){
    // Merge first column, each 4 rows to display time in larger format
    $('table.fc-agenda-slots tbody tr:not(.fc-minor)').each(function(){
        $(this).find("th:first-child").css("font-size", "12px").attr('rowSpan',4); //
        $(this).nextUntil("tr:not(.fc-minor)","tr.fc-minor").find("th:first-child").remove();
    });
})

然后，使用CSS应用正确的行高。请注意，我添加了行高设置，这是我与bootstrap兼容所需的。我还确保在日历外拖动时，默认选择行为不适用。

        body {
            -moz-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            user-select: none;              
        }

        .fc-agenda-slots td div {
            height: 6px;
            line-height: 6px;
        }
        .fc-agenda-axis {
            font-size:1px;
            line-height: 1px;
        }

fullcalendar固定行高

3 个答案: