完整日历未在 Bootstrap 选项卡中自动加载？

问题描述 投票：0回答：3

我正在开发一个旅游网站，我在其中使用了引导选项卡。在第一个选项卡中有一些内容，在第二个选项卡中我显示了完整的日历 js。一切工作正常，但是当我在第一个选项卡中显示完整日历时，它工作正常，但是当我在第二个选项卡中显示它时，它不会自动加载，而是当我点击月份按钮或左右箭头时它会加载。

无法找出问题所在。以下是完整代码：

  document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
    defaultView: 'dayGridMonth',
    defaultDate: '2019-08-07',
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    events: [
      {
        title: 'All Day Event',
        start: '2019-08-01'
      },
      {
        title: 'Long Event',
        start: '2019-08-07',
        end: '2019-08-10'
      },
      {
        groupId: '999',
        title: 'Repeating Event',
        start: '2019-08-09T16:00:00'
      },
      {
        groupId: '999',
        title: 'Repeating Event',
        start: '2019-08-16T16:00:00'
      },
      {
        title: 'Conference',
        start: '2019-08-11',
        end: '2019-08-13'
      },
      {
        title: 'Meeting',
        start: '2019-08-12T10:30:00',
        end: '2019-08-12T12:30:00'
      },
      {
        title: 'Lunch',
        start: '2019-08-12T12:00:00'
      },
      {
        title: 'Meeting',
        start: '2019-08-12T14:30:00'
      },
      {
        title: 'Birthday Party',
        start: '2019-08-13T07:00:00'
      },
      {
        title: 'Click for Google',
        url: 'http://google.com/',
        start: '2019-08-28'
      }
    ]
  });

  calendar.render();
 });  
html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 900px;
  margin: 40px auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>


<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Calendar not loaded automatically :(</h3>
    <div id='calendar'></div>
  </div>
</div>

javascript jquery html css fullcalendar
3个回答
3
投票
如果看不到 div（例如使用

display: none;

），
FullCalendar 将不会加载。

另一种方法是聆听 

#menu1
，当它可见时，运行 
calendar.render()
。

或者，您可以启动应用程序，让日历成为可见屏幕，如下所示：

<div class="tab-content">
  <div id="home" class="tab-pane fade in ">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade in active">
    <h3>Calendar not loaded automatically :(</h3>
    <div id='calendar'></div>
  </div>
</div>


 document.addEventListener('DOMContentLoaded', function() {
  var calendarButton = document.getElementById('calendarButton');
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
    defaultView: 'dayGridMonth',
    defaultDate: '2019-08-07',
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    events: [
      {
        title: 'All Day Event',
        start: '2019-08-01'
      },
      {
        title: 'Long Event',
        start: '2019-08-07',
        end: '2019-08-10'
      },
      {
        groupId: '999',
        title: 'Repeating Event',
        start: '2019-08-09T16:00:00'
      },
      {
        groupId: '999',
        title: 'Repeating Event',
        start: '2019-08-16T16:00:00'
      },
      {
        title: 'Conference',
        start: '2019-08-11',
        end: '2019-08-13'
      },
      {
        title: 'Meeting',
        start: '2019-08-12T10:30:00',
        end: '2019-08-12T12:30:00'
      },
      {
        title: 'Lunch',
        start: '2019-08-12T12:00:00'
      },
      {
        title: 'Meeting',
        start: '2019-08-12T14:30:00'
      },
      {
        title: 'Birthday Party',
        start: '2019-08-13T07:00:00'
      },
      {
        title: 'Click for Google',
        url: 'http://google.com/',
        start: '2019-08-28'
      }
    ]
  });


calendar.render();

 });  
html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 900px;
  margin: 40px auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>


<ul class="nav nav-tabs">
  <li ><a data-toggle="tab" href="#home">Home</a></li>
  <li><a id="calendarButton" data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in ">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade in active">
    <h3>Calendar not loaded automatically :(</h3>
    <div id='calendar'></div>
  </div>
</div>

2
投票

感谢所有帮助解决此问题的人。以下是我的解决方案版本，对我来说效果很好：

  $(document).ready(function() {

    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: ['interaction', 'dayGrid', 'timeGrid'],
      defaultView: 'dayGridMonth',
      defaultDate: '2019-09-06',
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay' },

    events: [
      {
        title: 'All Day Event',
        start: '2019-08-01'
      },
      {
        title: 'Long Event',
        start: '2019-08-07',
        end: '2019-08-10'
      },
      {
        groupId: '999',
        title: 'Repeating Event',
        start: '2019-08-09T16:00:00'
      },
      {
        groupId: '999',
        title: 'Repeating Event',
        start: '2019-08-16T16:00:00'
      },
      {
        title: 'Conference',
        start: '2019-08-11',
        end: '2019-08-13'
      },
      {
        title: 'Meeting',
        start: '2019-08-12T10:30:00',
        end: '2019-08-12T12:30:00'
      },
      {
        title: 'Lunch',
        start: '2019-08-12T12:00:00'
      },
      {
        title: 'Meeting',
        start: '2019-08-12T14:30:00'
      },
      {
        title: 'Birthday Party',
        start: '2019-08-13T07:00:00'
      },
      {
        title: 'Click for Google',
        url: 'http://google.com/',
        start: '2019-08-28'
      }
    ]
});
    calendar.render();
    $('.nav-tabs li a').click(function(){
      calendar.render();
    });
}); 
html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 900px;
  margin: 40px auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>


<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active show">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade show">
    <h3>Calendar loaded when you double click on second tab link</h3>
    <div id='calendar'></div>
  </div>
</div>

0
投票

作为解决方法，您可以使用 

one()
事件（与 
.on()
相同，除了给定元素和事件类型的处理程序在首次调用后未绑定。docs）：

$('#menu1').one('click', function(){
  $(this).click();
  calendar.render();
});

这样，第一次单击将触发显示选项卡的另一次单击，然后将渲染日历。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.