使用侧边栏切换时 Fullcalendar V5 宽度不会自动调整

Question

当使用侧边栏切换时.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>

有没有完整的日历函数可以在按下切换按钮重新调整宽度时调用。或者任何其他解决方法。

Answer 1

你可以打电话

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>

使用侧边栏切换时 Fullcalendar V5 宽度不会自动调整

Full Calender V.5 Width not Autoadjusting when sidebar is toggle is used

javascript

jquery

fullcalendar

fullcalendar-5