title: fullCalendar + Bootstrap tabs glitch: not rendering events until resizing browser
body: <p>I'm having a strange problem when using <strong>fullCalendar</strong> along with <strong>Bootstrap</strong>, having the <strong>calendar rendered within a non active tab pane</strong>. I'm using the <strong>AgendaView</strong>, and it's initially displayed with the column for hours with just 1 pixel of width assigned to it.</p>
  
  <p>It's placed within the "Operarios" tab.</p>
  
  <p>But the biggest problem is when rendering the events. They all are displayed compressed at the top of the timetable.</p>
  
  <p>Then if I resize the browser, or the frame, if I'm using Chrome Dev Tools or similar, then it's automatically re-rendered and it's correctly displayed.</p>
  
  <p>You may check it out here:</p>
  
  <p><a href="https://codepen.io/luisapuyen/pen/RYXZPr" rel="nofollow noreferrer">https://codepen.io/luisapuyen/pen/RYXZPr</a></p>
  
  <p>The HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>+ 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);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm"&gt;
        &lt;h3&gt;Configuración Auto-visitas&lt;/h3&gt;
        &lt;nav&gt;
          &lt;div class="nav nav-tabs" id="tabs-autovisita" role="tablist"&gt;
            &lt;a class="nav-item nav-link active" data-toggle="tab" role="tab" href="#general"&gt;General&lt;/a&gt;
            &lt;a class="nav-item nav-link" data-toggle="tab" role="tab" href="#operarios"&gt;Operarios&lt;/a&gt;
            &lt;a class="nav-item nav-link" data-toggle="tab" role="tab" href="#companyias"&gt;Compañías&lt;/a&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
        &lt;div class="tab-content"&gt;
          &lt;div class="tab-pane show active" id="general" role="tabpanel"&gt;
  
          &lt;/div&gt;
          &lt;div class="tab-pane" id="operarios" role="tabpanel"&gt;
            &lt;form method="post" name="operarios"&gt;
              &lt;div class="form-group"&gt;
                &lt;label&gt;Operarios&lt;/label&gt;
                &lt;select name="operarios" class="form-control dato"&gt;
                  &lt;option value="0"&gt;Todos&lt;/option&gt;
  
                &lt;/select&gt;
              &lt;/div&gt;
              &lt;div class="calendario dato"&gt;&lt;/div&gt;
              &lt;button type="submit" class="btn btn-primary guardar"&gt;Guardar&lt;/button&gt;
            &lt;/form&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane" id="companyias" role="tabpanel"&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm not sure whether it's a bug produced when using fullCalendar and Bootstrap together.</p>
  
  <p>The only way I've found it works is having the calendar in the active pane at first. But since semantically it corresponds to the first tab to be the one which must be active, I'd like to find a better solution.</p>
  
  <p>Any ideas?</p>