fullCalendar + глюк вкладок Bootstrap: не отображать события до изменения размера браузера

Question

У меня странная проблема при использовании fullCalendar вместе с Bootstrap , когда календарь отображается в неактивной области вкладок .Я использую AgendaView , и он изначально отображается со столбцом в течение нескольких часов с назначенным ему всего 1 пикселем ширины.

Он находится на вкладке "Operarios".

Но самая большая проблема - при рендеринге событий.Все они отображаются сжатыми в верхней части расписания.

Затем, если я изменю размер браузера или фрейма, если я использую 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' );
});

Вот пример функционирования .