我有一个tablist面板和最后一个标签使用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>
3条答案
按热度按时间lymgl2op1#
看起来你的日历在页面加载过程中被加载,但是css没有被应用,因为日历元素在那个时候是隐藏的。你可以移动你的日历加载标签点击,并给予一个小的时间间隔,如500毫秒。试试下面的代码
xwmevbvl2#
在
'shown.bs.tab'
上调用你的函数你的代码在此选项卡显示后运行bpsygsoo3#
您需要确保在显示包含日历的选项卡时呈现日历。这是因为日历似乎是根据其容器的大小来决定其呈现大小的。这在大多数情况下是有意义的,但这里的问题是,当标签被隐藏时,容器大小为0,这显然会导致日历以我们在问题中看到的方式压缩。
请注意,您不需要在每次显示选项卡时重新运行整个日历配置代码,您只需要调用
render()
。解决方案:
如果日历标签需要成为第一个活动标签,我能找到的最佳解决方案是将不同的标签设置为活动,然后使用Javascript“显示”日历标签,然后触发“显示”事件并呈现日历。
(Just在声明它不工作后立即呈现日历-我假设这是因为这发生在bootstrap呈现选项卡窗格之前)。
演示:
相关文件:
https://getbootstrap.com/docs/5.0/components/navs-tabs/#events