为了账号安全,请及时绑定邮箱和手机立即绑定

FullCalendar 未在 Boostrap 4 选项卡中加载

FullCalendar 未在 Boostrap 4 选项卡中加载

心有法竹 2023-01-06 10:51:11

我正在使用 Bootstrap 4 选项卡,在第二个选项卡上我想使用该FullCalendar库显示日历。我使用的 FullCalendar 版本是5.2.0. 如果日历显示在第一个选项卡上,它就可以正常工作,因为它没有隐藏;但是,当它是第二个选项卡的一部分时,它不会加载。


我试图通过在用户单击第二个选项卡时触发 JavaScript 事件单击来解决此问题。基本上,我尝试在用户单击选项卡后呈现日历,但没有成功。


这是我的代码:


<!-- Tabs -->

<div class="container-fluid">

    <div class="container-fluid">

        <ul class="nav nav-tabs">

            <li class="nav-item">

                <a class="nav-link active" data-toggle="tab" href="#today">Today</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" id="calendarButton" data-toggle="tab" href="#week">Week</a>

            </li>

        </ul>

    </div>

</div>


<!-- Tabs Content -->

<div class="tab-content">


    <!-- Appointments -->

    <div class="tab-pane container" id="today">

        <p> Appointments </p>

    </div>


    <!-- Weekly Calendar -->

    <div class="tab-pane container" id="week">

        <div class="container-fluid" id="calendar"></div>

    </div>

</div>



<script>

    document.addEventListener('DOMContentLoaded', function() {

        var calendarButton = document.getElementById('calendarButton');

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


        var calendar = new FullCalendar.Calendar(calendarEl, {


          themeSystem: 'bootstrap',


          headerToolbar: {

            right: 'listWeek'

          },


          events: [

                        {% for appointment in appointments %}

                        {

                            title: "{{ appointment.name}}",

                            start: '{{ appointment.start }}',

                            end: '{{ appointment.end }}',

                        },

                        {% endfor %}

                   ]

        });


        calendarButton.addEventListener('click', e => {

            calendar.render();

        });

    });

</script>

单击第二个选项卡后如何加载日历?


查看完整描述

1 回答

?
牛魔王的故事

TA贡献1576条经验 获得超3个赞

我设法通过延迟日历的呈现找到了解决方法。如果有人觉得它有帮助,要显示日历,您可以calendar.render()在我上面的代码中将其替换为setTimeout(() => {calendar.render()}, 1).



查看完整回答
反对 回复 2023-01-06
  • 1 回答
  • 0 关注
  • 13 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信