完整日历不显示首次引导模式显示

Question

我有一个带有fullCalendar的模态。

当模态第一次出现时，fullCalendar不显示任何内容。如果我关闭模态并再次打开它，fullCalendar会在加载事件时显示一点延迟。.fullcalendar('render')在这种情况下对我没有帮助。

$("a.ScheduleOpen").click(function(e) {
        loadcalendar();
        //$('.Calendar').fullCalendar('refresh');
        $(".Calendar").fullCalendar('render');
        $(".Calendar").fullCalendar('gotoDate', new Date(y, m, d));
        $('#pnl_Schedule').modal('show');

    });

当模态显示时，我有以下代码来处理渲染部分，但仍然不能正常工作：

$('#pnl_Schedule').on('shown.bs.modal', function() {
        $(".Calendar").fullCalendar('render');
    });

Answer 1

由于某些原因，Fullcalendar在引导模式下不会自动显示日历。只有今天、左侧和右侧按钮会显示，单击按钮后，日历在关闭和重新打开后会显示良好。

所以，我通过在模态启动后点击今天按钮来完成这项工作：

$('#calendar').fullCalendar();
$('#button').click(function() {
    window.setTimeout(clickToday, 200);
});
function clickToday() {
  $('.fc-button-today').click();
}

这是一把正在工作的小提琴。

编辑：

更新了@Ldom的修改建议。

Answer 2

谢谢。

我也遇到了同样的问题（日历在引导选项卡中），只有当页面调整大小时才会显示。

我已经调整了你的代码，使它只"触发"显示一次。这样，在单击选项卡后，用户在日历中的导航将得到维护。

function clickToday() {
    if (!$("tr.fc-week").is(':visible'))
    {
      $('.fc-button-today').click();
    }
}

Answer 3

尝试使用模式或选项卡事件：

$('#yourModal').on('shown.bs.modal', function(){
    $('#yourCalendar').fullCalendar({
        options: .....
    });
});

如果你需要更改日历或有一些变量，请销毁关闭它的

$('#yourModal').on('hide.bs.modal', function(){
    $('#yourCalendar').fullCalendar('destroy');
});

Answer 4

"必须有50信誉才能添加评论"。

对于任何使用FullCalendar 2.2.6版本的人来说，"today"按钮名称已从".fc button today"更改为".fc today button"，因此现在答案的一个功能如下：

function clickToday() {
    $('.fc-today-button').click();
}

Answer 5

在ringstaff的回答中添加一些内容：

我的今天按钮最初被禁用，所以点击功能不适用于"fc今天按钮"，所以我使用了"fc timeGridWeek按钮"（这是默认视图），或您选择的任何其他按钮（dayGridMonth按钮、timeGridDay按钮等）

而且，我有多个模态&日历，所以我为所有按钮添加了一个类。这是我的密码。

$('.check-calendar-button').each(function() {
   $(this).click(function() {
       window.setTimeout(clickWeekButton, 200);
   });
});
function clickWeekButton() {
   $('.fc-timeGridWeek-button').click();
}