javascript - FullCalendar.js 调整移动标题

Question

我在使用 fullcalendar.js 的项目中使用响应式样式。不幸的是，在移动视图中，我无法让标题的样式（fc-header-left、fc-header-center、fc-header-right）相互堆叠。例如...在桌面视图中看起来像... fc-header-left fc-header-center fc-header-right

当移动时，我希望标题的 3 个部分相互堆叠。fc-header-left fc-header-center fc-header-right

我试图用负边距、浮动和各种东西覆盖这些标题，但我无法让这些标题堆叠。

有谁知道我如何让标题部分在移动视图中相互堆叠？

谢谢

Answer 1

这适用于我的最新版本。使用屏幕宽度检查完成。

@media (max-width: 768px){
    .fc-toolbar .fc-left, .fc-toolbar .fc-center, .fc-toolbar .fc-right {
        display: inline-block;
        float: none !important;
    }
}

Answer 2

对于 Fullcalendar v5

@media (max-width: 767.98px) {
    .fc .fc-toolbar.fc-header-toolbar {
        display: block;
        text-align: center;
    }

    .fc-header-toolbar .fc-toolbar-chunk {
        display: block;
    }
}

Answer 3

给他们每个人一个width:100%;，display:block;这应该可以解决问题。至少我能够在 teh fullcalendar.js 网站上获得演示版来做到这一点。然后，您必须按照您认为合适的方式对齐它们。

.fc-header-left, fc-header-center, fc-header-right {
    width: 100%;
    display: block;
}

Answer 4

我正在使用的版本使用 flexbox。这对我有用，

.fc-toolbar {
    .fc-center h2 {
        font-size: 1.25em
    }
    display: block;
    text-align: center;
    @media (min-width: 600px) {
        display: flex;
    }
}