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();
}

这是working fiddle。

编辑：

更新了来自@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

＆＃34;必须有50个声誉才能添加评论＆＃34;。

对于使用FullCalendar版本2.2.6的任何人来说，＆＃34;今天＆＃34;按钮名称已从＆＃39; .fc-button-today＆＃39;更改为到＆＃39; .fc-today-button＆＃39;，所以答案的一个功能现在看起来像这样：

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

Answer 5

在ringstaff的答案上添加一些内容：

矿井的“今天”按钮最初被禁用，因此单击功能不适用于“ fc-today-button”，因此我改用“ fc-timeGridWeek-button”（这是默认视图）或任何其他按钮您所选择的（dayGridMonth按钮，timeGridDay按钮等）

而且，我有多个模式和日历，因此我为所有按钮添加了一个类。这是我的代码。

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

function clickWeekButton() {
   $('.fc-timeGridWeek-button').click();
}

Fullcalendar不会显示第一次自举模式显示

5 个答案: