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

Question

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

它位于“操作”标签中。

但是最大的问题是呈现事件时。它们全部显示在时间表的顶部。

然后，如果我调整浏览器或框架的大小，如果我使用的是Chrome Dev Tools或类似工具，则会自动重新呈现它并正确显示它。

您可以在这里查看：

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

这里是functioning example。