全日历标题按钮没有响应？

Question

我在我的项目上配置了 Fullcalendar，但我注意到在移动设备上，标题按钮的布局存在问题，一点也不美观

PC 上的完整日历：

手机上的完整日历：

有什么办法让它更美观吗？

Answer 1

这个 Fullcalender 没有响应，所以我们必须让标题强制响应。在您的

ngOnInit()

函数中添加以下代码。

document.querySelector('style').textContent += "@media screen and (max-width:767px) { .fc-toolbar.fc-header-toolbar {flex-direction:column;} .fc-toolbar-chunk { display: table-row; text-align:center; padding:5px 0; } }";

Answer 2

我找到了一个超级简单的解决方案，它似乎运行良好并且只是简单的 CSS：

@media screen and (max-width:767px) { .fc-toolbar.fc-header-toolbar {font-size: 60%}}

Answer 3

如果你像我一样只使用 HTML、JavaScript 和 CSS。 我使用了 Subham Debnath 的回复，这是给那些使用 Angular 的人的。

以下内容适用于默认主题 FullCalendar 或添加的 Bootstrap 5。

希望对你或新人有所帮助

只需补充：

document.addEventListener('DOMContentLoaded', function() {

    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        // [...] Your code
    });
    calendar.render();

    document.querySelector('style').textContent += "@media screen and (max-width:767px) { .fc-toolbar.fc-header-toolbar {flex-direction:column;} .fc-toolbar-chunk { display: table-row; text-align:center; padding:5px 0; } }";
});