Question

我有一个要求应该使用fullcalendar jquery插件的要求。但我需要定制它。比如，我需要将（日/月/周）视图按钮的位置更改为屏幕的最左侧。当我尝试修改fullcalendar.js时，我发现它只能移动到日历的右侧/左侧。不仅如此。我需要在页面的侧边栏中左侧显示这些按钮。可能吗？？或者还有其他选择吗？

我认为一种方法是自己创建按钮并将它们连接到Fullcalendar小部件。但我不是一个jquery专家，我宁愿尝试更简单的东西。感谢。

Answer 1

一个简单而快速的解决方案是单独保留插件JS，只需隐藏内置按钮并将其添加到您想要的位置。

在按钮的单击处理程序中，触发相关插件按钮的单击。它就像在浏览器控制台html视图中检查每个按钮的类并添加到我开始的代码一样简单

实施例

/* quick hide with script for a test, best done with css */
$('.fc-header-right').hide();

$('#myWeekViewButton').click(function(){
    $('.fc-button-agendaWeek').click();
});

这可以在演示网站上的浏览器控制台中很好地测试

Answer 2

首先，您可以从FullCalendar init的标头定义中删除日/月/周按钮。接下来，您可以使用类似于以下的功能连接自定义按钮以执行视图切换操作：

function switchView(viewName) {
  $('#calendar').fullCalendar('changeView', viewName);
}

请告诉我这是否有帮助！

Answer 3

您可以为 headerToolbar 使用预设

var calendar = new FullCalendar.Calendar(calendarEl, {
        headerToolbar: {
            center: 'dayGridMonth,timeGridFourDay'
        },.....

https://fullcalendar.io/docs/custom-view-with-settings

更改完整的日历按钮位置

3 个答案: