FullCalendar 时隙高度

Question

我有一个需求，可以在垂直资源视图中调整时隙间隔的高度。

datesRender: function(dayRenderInfo)
{
    $(calendarEl).find('tr[data-time]').css('height', '50px');
}

这适用于第一次加载。一切都很棒。事件气泡会拉伸以适应新的高度，并从开始时间适当地延伸到结束时间。

然而，一旦我执行任何导航，事件气泡的大小就不再正确，即使时隙本身仍然具有新的设置高度。事件气泡似乎不再意识到时间段高度已更改。

有更好的方法吗？
如果没有，我怎样才能让我的事件气泡在日期导航中保持适当的大小？

代码笔：https://codepen.io/julesx-the-decoder/pen/pozyzNL?editors=0010

Answer 1

我添加了一个包含可用尺寸的下拉菜单。请参阅以下分支：

https://codepen.io/lee-taylor/pen/rNBMWrv

$("#rowHeight").on("change", function(e)
{
    var height = $(this).children("option:selected").val();
    $("head style#height").remove();
    $("head").append('<style id="height"> .fc-time-grid .fc-slats td {height: ' + height + 'px;}</style>');

    calendar.render();
});

通过强制样式标签的 creation/update 和使用日历的刷新方法，我想我已经实现了你想要的。

FullCalendar 时隙高度

FullCalendar time slot height

javascript

css

fullcalendar

fullcalendar-scheduler