2

我有一个要求，应该在哪里使用 fullcalendar jquery 插件。但我需要自定义它。就像，我需要将（日/月/周）视图按钮的位置更改到屏幕的最左侧。当我尝试修改 fullcalendar.js 时，我可以看到它只能移动到日历的右侧/左侧。不止于此。我需要将这些按钮放在左侧，就像在页面的侧边栏中一样。可能吗？？或者还有其他选择吗？？

我想一种方法是自己创建按钮并将它们连接到 Fullcalendar 小部件。但我不是 jquery 专业人士，我更愿意尝试更简单的东西。谢谢。

4

3 回答 3

4

一个简单快捷的解决方案是不理会插件 JS，只需隐藏内置按钮并在您想要的位置添加您自己的按钮。

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

例子

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

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

这在演示站点的浏览器控制台中测试良好

于 2012-10-27T14:48:53.717 回答
2

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

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

让我知道这是否有帮助！

于 2012-10-27T20:30:17.477 回答
0

您可以对 headerToolbar 使用 de 预设

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

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

于 2021-03-11T11:27:28.923 回答