javascript - 使用侧边栏切换时,Full Calender V.5 宽度不自动调整
问题描述
使用侧边栏切换时,.main
div 的宽度会扩大,但日历右侧会出现间隙。
全屏查看示例
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'UTC',
initialView: 'timeGridWeek',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'timeGridWeek,timeGridDay'
},
events: 'https://fullcalendar.io/demo-events.json'
});
calendar.render();
$('.icon').click(function(){
$('.sidebar').toggleClass('in');
});
});
.sidebar{
background:#eeeeee;
height:100vh;
width:200px;
}
.h-100{
height:100vh!important;
}
.main{
flex:1;
padding:20px
}
.icon{
cursor: pointer;
}
.in{
width:25px!important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.7.0/main.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.7.0/main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex h-100">
<div class="sidebar">
<div class="icon text-right px-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-left" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
</svg>
</div>
</div>
<div class="main">
<div id='calendar'></div>
</div>
</div>
按下切换按钮以重新调整宽度时,是否可以调用任何完整的日历功能。或任何其他解决方法。
解决方案
你可以打电话
calendar.render();
每次单击侧边栏按钮时再次单击。
演示:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'UTC',
initialView: 'timeGridWeek',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'timeGridWeek,timeGridDay'
},
events: 'https://fullcalendar.io/demo-events.json'
});
calendar.render();
$('.icon').click(function(){
$('.sidebar').toggleClass('in');
calendar.render();
});
});
.sidebar{
background:#eeeeee;
height:100vh;
width:200px;
}
.h-100{
height:100vh!important;
}
.main{
flex:1;
padding:20px
}
.icon{
cursor: pointer;
}
.in{
width:25px!important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.7.0/main.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.7.0/main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex h-100">
<div class="sidebar">
<div class="icon text-right px-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-left" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
</svg>
</div>
</div>
<div class="main">
<div id='calendar'></div>
</div>
</div>
推荐阅读
- reactjs - React Native 状态变量未从道具更新
- java - 选择查询以在表中多次选择连续行
- flutter - Flutter Firestore 流被拒绝异常
- embedded - VLIW - 指令宽度性能提升
- oracle-jet - 默认十进制格式 Oracle JETt
- amazon-web-services - 在 aws_eks_node_group 块中使用 launch_template 的正确方法是什么?
- javascript - 某些页面上的 Laravel CSRF 令牌不匹配
- c# - 如何为可枚举类型返回 NotFound()?
- javascript - 从参数化的 module.exports 调用函数
- c# - .NET Core EF 一对多/多对多