fullcalendar - fullcalendar 固定行高

Question

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

$('#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 应用正确的行高。请注意，我添加了 line-height 样式，这是与 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;
        }