fullCalendar + Bootstrap 选项卡故障：在调整浏览器大小之前不呈现事件

Question

在将fullCalendar与Bootstrap一起使用时，我遇到了一个奇怪的问题，将日历呈现在非活动选项卡窗格中。 我正在使用AgendaView ，它最初与列一起显示几个小时，仅分配了 1 个像素的宽度。

它位于“Operarios”选项卡中。

但最大的问题是渲染事件时。 它们都压缩显示在时间表的顶部。

然后，如果我调整浏览器或框架的大小，如果我使用的是 Chrome 开发工具或类似工具，那么它会自动重新渲染并正确显示。

你可以在这里查看：

https://codepen.io/luisapuyen/pen/RYXZPr

的HTML：

 + function($) { $(function() { var opcionesCalendario = { selectable: true, unselectAuto: false, locale: 'es', defaultView: 'agendaWeek', header: false, footer: false, height: 400, columnHeaderFormat: 'ddd', eventColor: '#ffdc11', views: { agenda: { // name of view titleFormat: '', allDaySlot: false, slotEventOverlap: false, minTime: '07:00:00', maxTime: '23:00:00', slotDuration: '01:00:00', footer: false } }, select: function(startDate, endDate, event, view) { var evento = [{ start: startDate, end: endDate }]; $calendario.fullCalendar('addEventSource', evento); console.log('selected ' + startDate.format() + ' to ' + endDate.format(), view); } }, $body = $('body'), $tabs = $body.find('#tabs-panel-autovisita'), $forms = $body.find('form'), $operariosSel = $forms.filter('[name="operarios"]').find('select[name="operarios"]') $calendario = $body.find('.calendario').fullCalendar(opcionesCalendario); // INICIO init(); function init() { mostrarRangos(); $operariosSel.on('change', function() { mostrarRangos(); }); } function obtenerDiaInicial() { return moment().isoWeekday(1); } function mostrarRangosOperarioCalendario(rangos) { var diaInicialMoment = obtenerDiaInicial(), diaMoment, diaSemana, eventos = []; $.each(rangos, function(i, rango) { diaSemana = +rango.dia_semana - 1; diaMoment = diaInicialMoment.clone().add(diaSemana, 'days'); eventos.push({ start: moment(diaMoment.format('YYYY-MM-DD') + 'T' + rango.hora_inicio), end: moment(diaMoment.format('YYYY-MM-DD') + 'T' + rango.hora_fin) }); }); $calendario.fullCalendar('removeEvents') $calendario.fullCalendar('renderEvents', eventos); } function obtenerRangosOperario(idOp) { // ajax request that returns: var res = JSON.parse('{"rangos":[{"dia_semana":"2","hora_inicio":"11:00:00","hora_fin":"13:00:00"},{"dia_semana":"1","hora_inicio":"09:00:00","hora_fin":"14:00:00"},{"dia_semana":"4","hora_inicio":"10:00:00","hora_fin":"17:00:00"},{"dia_semana":"3","hora_inicio":"14:00:00","hora_fin":"18:00:00"}],"ok":"1"}'); mostrarRangosOperarioCalendario(res.rangos); } function mostrarRangos() { var idOp = +$operariosSel.val(); obtenerRangosOperario(idOp); } }); }(jQuery);

 <div class="container"> <div class="row"> <div class="col-sm"> <h3>Configuración Auto-visitas</h3> <nav> <div class="nav nav-tabs" id="tabs-autovisita" role="tablist"> <a class="nav-item nav-link active" data-toggle="tab" role="tab" href="#general">General</a> <a class="nav-item nav-link" data-toggle="tab" role="tab" href="#operarios">Operarios</a> <a class="nav-item nav-link" data-toggle="tab" role="tab" href="#companyias">Compañías</a> </div> </nav> <div class="tab-content"> <div class="tab-pane show active" id="general" role="tabpanel"> </div> <div class="tab-pane" id="operarios" role="tabpanel"> <form method="post" name="operarios"> <div class="form-group"> <label>Operarios</label> <select name="operarios" class="form-control dato"> <option value="0">Todos</option> </select> </div> <div class="calendario dato"></div> <button type="submit" class="btn btn-primary guardar">Guardar</button> </form> </div> <div class="tab-pane" id="companyias" role="tabpanel"> </div> </div> </div> </div> </div>

我不确定这是否是同时使用 fullCalendar 和 Bootstrap 时产生的错误。

我发现它起作用的唯一方法是首先将日历放在活动窗格中。 但由于在语义上它对应于第一个选项卡是必须处于活动状态的选项卡，我想找到一个更好的解决方案。

有任何想法吗？

Answer 1

Fullcalendar无法检索元素的大小和尺寸，因为它们设置为display: none 。 您可以从页面刷新的计算样式中看到这一点。 您的事件应该设置为top和bottom值，但是它们的值都为0 。

这就是为什么您的事件都“在时间表的顶部压缩显示”的原因。

一个简单的解决方法是侦听制表符更改事件并重新呈现全日历。

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
    $calendario.fullCalendar( 'rerenderEvents' );
});

这是一个有效的示例 。

Answer 2

在 React fullcalendar（版本 5）中，我无法调用 render 或 rerender 方法。

如果 FullCalendar 侦听窗口调整大小事件，它会自动更新大小。 我只是在日历选项卡延迟可见时触发调整大小事件。 参考以下代码

setTimeout(() => window.dispatchEvent(new Event('resize')), 500)