css not loading in fullcalendar when switching to tab

huangapple
go评论60阅读模式
英文:

css not loading in fullcalendar when switching to tab

问题

我有一个选项卡面板，最后一个选项卡使用了一个fullcalendar，并且存在这样的问题：当切换到该选项卡时，日历的CSS未加载，但如果我在日历本身中切换到另一个月份，那么CSS开始起作用。我的日历版本是5.7.2，对于版本3，我没有观察到这样的问题，可能是什么问题？

var data = [];

$(document).ready(function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev',
            center: 'title',
            right: 'next'
        },
        editable: false,
        contentHeight: 705,
        events: data
    });

    calendar.render();
});

html, body {
  margin: 0;
  padding: 0;
  font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 900px;
  margin: 20px auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.0.0-beta.1/main.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js" integrity="sha512-TAVtO5mj3yhqvqWq539ELZe1kdI+ggl2XkVNJ7h33EeYK03qTyiKPbTu2DrrsuWlggnvCr3+A29goA7y0aZSFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://unpkg.com/fullcalendar-scheduler@5.7.2/main.js"></script>

<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">
        Home
    </button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">
        Profile
    </button>
    <button class="nav-link" id="nav-calendar-tab" data-bs-toggle="tab" data-bs-target="#nav-calendar" type="button" role="tab" aria-controls="nav-calendar" aria-selected="false">
        Calendar
    </button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Home</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Profile</div>
  <div class="tab-pane fade" id="nav-calendar" role="tabpanel" aria-labelledby="nav-calendar-tab">
    <div id="calendar"></div>
  </div>
</div>
英文:

I have a tablist panel and the last tab uses a fullcalendar

And there is such a problem that when switching to the tab, the css of the calendar is not loaded, BUT if I switch to another month in the calendar itself, then the css starts working

My version of the calendar is 5.7.2, for versions 3 I did not observe such a problem, what could be the problem?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var data = [];
$(document).ready(function() {
var calendarEl = document.getElementById(&#39;calendar&#39;);
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: &#39;dayGridMonth&#39;,
headerToolbar: {
left: &#39;prev&#39;,
center: &#39;title&#39;,
right: &#39;next&#39;
},
editable: false,
contentHeight: 705,
events: data
});
calendar.render();
});

<!-- language: lang-css -->

html, body {
margin: 0;
padding: 0;
font-family: &quot;Lucida Grande&quot;,Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 20px auto;
}

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://pro.fontawesome.com/releases/v5.10.0/css/all.css&quot; integrity=&quot;sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p&quot; crossorigin=&quot;anonymous&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.0.0-beta.1/main.min.css&quot; /&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js&quot; integrity=&quot;sha512-TAVtO5mj3yhqvqWq539ELZe1kdI+ggl2XkVNJ7h33EeYK03qTyiKPbTu2DrrsuWlggnvCr3+A29goA7y0aZSFg==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://unpkg.com/fullcalendar-scheduler@5.7.2/main.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.jquery.com/ui/1.11.3/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;nav&gt;
&lt;div class=&quot;nav nav-tabs&quot; id=&quot;nav-tab&quot; role=&quot;tablist&quot;&gt;
&lt;button class=&quot;nav-link active&quot; id=&quot;nav-home-tab&quot; data-bs-toggle=&quot;tab&quot; data-bs-target=&quot;#nav-home&quot; type=&quot;button&quot; role=&quot;tab&quot; aria-controls=&quot;nav-home&quot; aria-selected=&quot;true&quot;&gt;
Home
&lt;/button&gt;
&lt;button class=&quot;nav-link&quot; id=&quot;nav-profile-tab&quot; data-bs-toggle=&quot;tab&quot; data-bs-target=&quot;#nav-profile&quot; type=&quot;button&quot; role=&quot;tab&quot; aria-controls=&quot;nav-profile&quot; aria-selected=&quot;false&quot;&gt;
Profile
&lt;/button&gt;
&lt;button class=&quot;nav-link&quot; id=&quot;nav-calendar-tab&quot; data-bs-toggle=&quot;tab&quot; data-bs-target=&quot;#nav-calendar&quot; type=&quot;button&quot; role=&quot;tab&quot; aria-controls=&quot;nav-calendar&quot; aria-selected=&quot;false&quot;&gt;
Calendar
&lt;/button&gt;
&lt;/div&gt;
&lt;/nav&gt;
&lt;div class=&quot;tab-content&quot; id=&quot;nav-tabContent&quot;&gt;
&lt;div class=&quot;tab-pane fade show active&quot; id=&quot;nav-home&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;nav-home-tab&quot;&gt;Home&lt;/div&gt;
&lt;div class=&quot;tab-pane fade&quot; id=&quot;nav-profile&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;nav-profile-tab&quot;&gt;Profile&lt;/div&gt;
&lt;div class=&quot;tab-pane fade&quot; id=&quot;nav-calendar&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;nav-calendar-tab&quot;&gt;
&lt;div id=&quot;calendar&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案1

得分: 2

以下是翻译好的部分：

"看起来您的日历在页面加载时正在加载，但是在日历元素被隐藏的时候未应用 CSS。您可以在选项卡点击时加载日历并设置一个小的时间间隔，如 500 毫秒。请尝试以下代码：

<script>
   var data = [];

    $(document).ready(function () {
        $("#nav-calendar-tab").on("click", function () {
            setTimeout(function () {
                var calendarEl = document.getElementById('calendar');

                var calendar = new FullCalendar.Calendar(calendarEl, {
                    initialView: 'dayGridMonth',
                    headerToolbar: {
                        left: 'prev',
                        center: 'title',
                        right: 'next'
                    },
                    editable: false,
                    contentHeight: 705,
                    events: data
                });

                calendar.render();
            }, 500);
           
        });

    });//end of document.ready

</script>
英文:

It looks like your calendar is loading during page load but the css is not applied as the calendar element is hidden that time. You can move your calendar load on tab click and give a small time interval like 500 ms. Try the below code

  &lt;script&gt;
var data = [];
$(document).ready(function () {
$(&quot;#nav-calendar-tab&quot;).on(&quot;click&quot;, function () {
setTimeout(function () {
var calendarEl = document.getElementById(&#39;calendar&#39;);
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: &#39;dayGridMonth&#39;,
headerToolbar: {
left: &#39;prev&#39;,
center: &#39;title&#39;,
right: &#39;next&#39;
},
editable: false,
contentHeight: 705,
events: data
});
calendar.render();
}, 500);
});
});//end of document.ready
&lt;/script&gt;

答案2

得分: 1

Sure, here's the translated code snippet:

var data = [];
var calendarEl = document.getElementById('nav-calendar-tab');
$(document).ready(function () {
  calendarEl.addEventListener('shown.bs.tab', function (event) {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
      headerToolbar: {
        left: 'prev',
        center: 'title',
        right: 'next'
      },
      editable: false,
      contentHeight: 705,
      events: data
    });
    calendar.render();
  })
});//end of document.ready

The HTML part is already in Chinese characters, so I won't translate it.

英文:

call your function on &#39;shown.bs.tab&#39; your code run after this tab show

var data = [];
var calendarEl = document.getElementById(&#39;nav-calendar-tab&#39;);
$(document).ready(function () {
calendarEl.addEventListener(&#39;shown.bs.tab&#39;, function (event) {
var calendarEl = document.getElementById(&#39;calendar&#39;);
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: &#39;dayGridMonth&#39;,
headerToolbar: {
left: &#39;prev&#39;,
center: &#39;title&#39;,
right: &#39;next&#39;
},
editable: false,
contentHeight: 705,
events: data
});
calendar.render();
})
});//end of document.ready

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

 var data = [];
var calendarEl = document.getElementById(&#39;nav-calendar-tab&#39;);
$(document).ready(function () {
calendarEl.addEventListener(&#39;shown.bs.tab&#39;, function (event) {
var calendarEl = document.getElementById(&#39;calendar&#39;);
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: &#39;dayGridMonth&#39;,
headerToolbar: {
left: &#39;prev&#39;,
center: &#39;title&#39;,
right: &#39;next&#39;
},
editable: false,
contentHeight: 705,
events: data
});
calendar.render();
})
});//end of document.ready

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://pro.fontawesome.com/releases/v5.10.0/css/all.css&quot; integrity=&quot;sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p&quot; crossorigin=&quot;anonymous&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.0.0-beta.1/main.min.css&quot; /&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js&quot; integrity=&quot;sha512-TAVtO5mj3yhqvqWq539ELZe1kdI+ggl2XkVNJ7h33EeYK03qTyiKPbTu2DrrsuWlggnvCr3+A29goA7y0aZSFg==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://unpkg.com/fullcalendar-scheduler@5.7.2/main.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.jquery.com/ui/1.11.3/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;nav&gt;
&lt;div class=&quot;nav nav-tabs&quot; id=&quot;nav-tab&quot; role=&quot;tablist&quot;&gt;
&lt;button class=&quot;nav-link active&quot; id=&quot;nav-home-tab&quot; data-bs-toggle=&quot;tab&quot; data-bs-target=&quot;#nav-home&quot; type=&quot;button&quot; role=&quot;tab&quot; aria-controls=&quot;nav-home&quot; aria-selected=&quot;true&quot;&gt;
Home
&lt;/button&gt;
&lt;button class=&quot;nav-link&quot; id=&quot;nav-profile-tab&quot; data-bs-toggle=&quot;tab&quot; data-bs-target=&quot;#nav-profile&quot; type=&quot;button&quot; role=&quot;tab&quot; aria-controls=&quot;nav-profile&quot; aria-selected=&quot;false&quot;&gt;
Profile
&lt;/button&gt;
&lt;button class=&quot;nav-link&quot; id=&quot;nav-calendar-tab&quot; data-bs-toggle=&quot;tab&quot; data-bs-target=&quot;#nav-calendar&quot; type=&quot;button&quot; role=&quot;tab&quot; aria-controls=&quot;nav-calendar&quot; aria-selected=&quot;false&quot;&gt;
Calendar
&lt;/button&gt;
&lt;/div&gt;
&lt;/nav&gt;
&lt;div class=&quot;tab-content&quot; id=&quot;nav-tabContent&quot;&gt;
&lt;div class=&quot;tab-pane fade show active&quot; id=&quot;nav-home&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;nav-home-tab&quot;&gt;Home&lt;/div&gt;
&lt;div class=&quot;tab-pane fade&quot; id=&quot;nav-profile&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;nav-profile-tab&quot;&gt;Profile&lt;/div&gt;
&lt;div class=&quot;tab-pane fade&quot; id=&quot;nav-calendar&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;nav-calendar-tab&quot;&gt;
&lt;div id=&quot;calendar&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案3

得分: 1

You need to ensure the calendar is (re-)rendered when the tab containing the calendar is shown. This is because the calendar appears to decide on its rendered sized based on the size of its container. This makes sense most of the time, but the problem here is that when the tab is hidden, the container size is 0, which obviously then causes the calendar to compress in the way we can see in your question.

Note that you don't need to re-run the entire calendar configuration code each time the tab is shown, you only need to call render().

Solution:

var data = [];

$(document).ready(function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    headerToolbar: {
      left: 'prev',
      center: 'title',
      right: 'next'
    },
    editable: false,
    contentHeight: 705,
    events: data
  });

  var tabButtons = document.querySelectorAll('button[data-bs-toggle="tab"]');
  tabButtons.forEach(function(tabEl) {
    tabEl.addEventListener('shown.bs.tab', function(event) {
      if (event.target.innerText == "Calendar") calendar.render();
    });
  });
});

If the calendar tab needs to be the first active tab, the best workaround I can find is to set a different tab as active, and then use JavaScript to "show" the calendar tab, which will then trigger the "shown" event and render the calendar.

Demo:

var data = [];

$(document).ready(function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    headerToolbar: {
      left: 'prev',
      center: 'title',
      right: 'next'
    },
    editable: false,
    contentHeight: 705,
    events: data
  });

  var tabButtons = document.querySelectorAll('button[data-bs-toggle="tab"]');
  tabButtons.forEach(function(tabEl) {
    tabEl.addEventListener('shown.bs.tab', function(event) {
      if (event.target.innerText == "Calendar") calendar.render();
    });
  });
});

Relevant documentation:

Bootstrap Navs and Tabs Events

英文:

You need to ensure the calendar is (re-)rendered when the tab containing the calendar is shown. This is because the calendar appears to decide on its rendered sized based on the size of its container. This makes sense most of the time, but the problem here is that when the tab is hidden, the container size is 0, which obviously then causes the calendar to compress in the way we can see in your question.

Note that you don't need to re-run the entire calendar configuration code each time the tab is shown, you only need to call render().

Solution:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var data = [];
$(document).ready(function() {
var calendarEl = document.getElementById(&#39;calendar&#39;);
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: &#39;dayGridMonth&#39;,
headerToolbar: {
left: &#39;prev&#39;,
center: &#39;title&#39;,
right: &#39;next&#39;
},
editable: false,
contentHeight: 705,
events: data
});
var tabButtons = document.querySelectorAll(&#39;button[data-bs-toggle=&quot;tab&quot;]&#39;);
tabButtons.forEach(function(tabEl) {
tabEl.addEventListener(&#39;shown.bs.tab&#39;, function(event) {
if (event.target.innerText == &quot;Calendar&quot;) calendar.render();
});
});
});

<!-- language: lang-css -->

html,
body {
margin: 0;
padding: 0;
font-family: &quot;Lucida Grande&quot;, Helvetica, Arial, Verdana, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 20px auto;
}

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://pro.fontawesome.com/releases/v5.10.0/css/all.css&quot; integrity=&quot;sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p&quot; crossorigin=&quot;anonymous&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.0.0-beta.1/main.min.css&quot; /&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js&quot; integrity=&quot;sha512-TAVtO5mj3yhqvqWq539ELZe1kdI+ggl2XkVNJ7h33EeYK03qTyiKPbTu2DrrsuWlggnvCr3+A29goA7y0aZSFg==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://unpkg.com/fullcalendar-scheduler@5.7.2/main.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.jquery.com/ui/1.11.3/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;nav&gt;
&lt;div class=&quot;nav nav-tabs&quot; id=&quot;nav-tab&quot; role=&quot;tablist&quot;&gt;
&lt;button class=&quot;nav-link active&quot; id=&quot;nav-home-tab&quot; data-bs-toggle=&quot;tab&quot; data-bs-target=&quot;#nav-home&quot; type=&quot;button&quot; role=&quot;tab&quot; aria-controls=&quot;nav-home&quot; aria-selected=&quot;true&quot;&gt;
Home
&lt;/button&gt;
&lt;button class=&quot;nav-link&quot; id=&quot;nav-profile-tab&quot; data-bs-toggle=&quot;tab&quot; data-bs-target=&quot;#nav-profile&quot; type=&quot;button&quot; role=&quot;tab&quot; aria-controls=&quot;nav-profile&quot; aria-selected=&quot;false&quot;&gt;
Profile
&lt;/button&gt;
&lt;button class=&quot;nav-link&quot; id=&quot;nav-calendar-tab&quot; data-bs-toggle=&quot;tab&quot; data-bs-target=&quot;#nav-calendar&quot; type=&quot;button&quot; role=&quot;tab&quot; aria-controls=&quot;nav-calendar&quot; aria-selected=&quot;false&quot;&gt;
Calendar
&lt;/button&gt;
&lt;/div&gt;
&lt;/nav&gt;
&lt;div class=&quot;tab-content&quot; id=&quot;nav-tabContent&quot;&gt;
&lt;div class=&quot;tab-pane fade show active&quot; id=&quot;nav-home&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;nav-home-tab&quot;&gt;Home&lt;/div&gt;
&lt;div class=&quot;tab-pane fade&quot; id=&quot;nav-profile&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;nav-profile-tab&quot;&gt;Profile&lt;/div&gt;
&lt;div class=&quot;tab-pane fade&quot; id=&quot;nav-calendar&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;nav-calendar-tab&quot;&gt;
&lt;div id=&quot;calendar&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

If the calendar tab needs to be the first active tab, the best workaround I can find is to set a different tab as active, and then use Javascript to "show" the calendar tab, which will then trigger the "shown" event and render the calendar.

(Just rendering the calendar immediately after declaring it didn't work - I assume because this happened before bootstrap had rendered the tab pane).

Demo:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var data = [];
$(document).ready(function() {
var calendarEl = document.getElementById(&#39;calendar&#39;);
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: &#39;dayGridMonth&#39;,
headerToolbar: {
left: &#39;prev&#39;,
center: &#39;title&#39;,
right: &#39;next&#39;
},
editable: false,
contentHeight: 705,
events: data
});
var tabButtons = document.querySelectorAll(&#39;button[data-bs-toggle=&quot;tab&quot;]&#39;);
tabButtons.forEach(function(tabEl) {
tabEl.addEventListener(&#39;shown.bs.tab&#39;, function(event) {
if (event.target.innerText == &quot;Calendar&quot;) calendar.render();
});
});
});

<!-- language: lang-css -->

html,
body {
margin: 0;
padding: 0;
font-family: &quot;Lucida Grande&quot;, Helvetica, Arial, Verdana, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 20px auto;
}

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://pro.fontawesome.com/releases/v5.10.0/css/all.css&quot; integrity=&quot;sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p&quot; crossorigin=&quot;anonymous&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.0.0-beta.1/main.min.css&quot; /&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js&quot; integrity=&quot;sha512-TAVtO5mj3yhqvqWq539ELZe1kdI+ggl2XkVNJ7h33EeYK03qTyiKPbTu2DrrsuWlggnvCr3+A29goA7y0aZSFg==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://unpkg.com/fullcalendar-scheduler@5.7.2/main.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.jquery.com/ui/1.11.3/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;nav&gt;
&lt;div class=&quot;nav nav-tabs&quot; id=&quot;nav-tab&quot; role=&quot;tablist&quot;&gt;
&lt;button class=&quot;nav-link active&quot; id=&quot;nav-home-tab&quot; data-bs-toggle=&quot;tab&quot; data-bs-target=&quot;#nav-home&quot; type=&quot;button&quot; role=&quot;tab&quot; aria-controls=&quot;nav-home&quot; aria-selected=&quot;true&quot;&gt;
Home
&lt;/button&gt;
&lt;button class=&quot;nav-link&quot; id=&quot;nav-profile-tab&quot; data-bs-toggle=&quot;tab&quot; data-bs-target=&quot;#nav-profile&quot; type=&quot;button&quot; role=&quot;tab&quot; aria-controls=&quot;nav-profile&quot; aria-selected=&quot;false&quot;&gt;
Profile
&lt;/button&gt;
&lt;button class=&quot;nav-link&quot; id=&quot;nav-calendar-tab&quot; data-bs-toggle=&quot;tab&quot; data-bs-target=&quot;#nav-calendar&quot; type=&quot;button&quot; role=&quot;tab&quot; aria-controls=&quot;nav-calendar&quot; aria-selected=&quot;false&quot;&gt;
Calendar
&lt;/button&gt;
&lt;/div&gt;
&lt;/nav&gt;
&lt;div class=&quot;tab-content&quot; id=&quot;nav-tabContent&quot;&gt;
&lt;div class=&quot;tab-pane fade show active&quot; id=&quot;nav-home&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;nav-home-tab&quot;&gt;Home&lt;/div&gt;
&lt;div class=&quot;tab-pane fade&quot; id=&quot;nav-profile&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;nav-profile-tab&quot;&gt;Profile&lt;/div&gt;
&lt;div class=&quot;tab-pane fade&quot; id=&quot;nav-calendar&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;nav-calendar-tab&quot;&gt;
&lt;div id=&quot;calendar&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

Relevant documentation:

https://getbootstrap.com/docs/5.0/components/navs-tabs/#events

huangapple
  • 本文由 发表于 2023年5月25日 19:34:28
  • 转载请务必保留本文链接：https://go.coder-hub.com/76331819.html
  • bootstrap-tabs
  • css
  • fullcalendar
  • javascript
  • twitter-bootstrap
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定