Question

完整的日历日视图高度调整似乎不可能。我一直在寻找和尝试一切。我可以得到高度调整，但事件重叠？我在stackoverflow上看过几个帖子，但没有一个可以解决我的问题。

eventAfterRender: function(event, element, view) {
                console.log($(view));
                //$('div.fc-day-content').css({"height":"50px"});
                $('.fc-event').css({"height":"50px"});

             },

这是它吐出的CSS。

element.style {
    background-color: #2E3436;
    border-color: #2E3436;
    color: #FFFFFF;
    height: 50px;
    left: 3px;
    position: absolute;
    top: 36px;
    width: 1439px;
    }

Answer 1

假设您想要设置高度的视图是basicDay，那么您需要的是

eventRender: function(event, element, view) {
    if(view.name === 'basicDay') {
        $(element).height(100);
    }
}

请参阅jsfiddle example

Answer 2

这不起作用，因为元素具有“position：absolute”，并且每个元素都被'top'属性设置在另一个之下，所以如果你改变它们的所有高度它们会溢出并阻塞对方，我是什么确实是改变他们的高度，但也增加他们与顶部的距离，使用：

$('.fc-event').css('height', '100px');

然后 -

$('.fc-event').css('top', function(i, v) {
return (((parseFloat(v)-18)/20)*100 + 18) + 'px';
});

Answer 3

是的，您可以在事件呈现选项

中执行此操作

 eventRender: function (event, element,view) {
                 debugger; 
             if(view.type == "agendaDay"){
                 $('.fc-time-grid .fc-slats td').css('height','2.8em');}
             else
                 $('.fc-time-grid .fc-slats td').css('height','1.8em');}

仅在dayView中更改完整日历事件高度

3 个答案: