完整日历根据窗口大小更改视图

Question

我正在为我的网络应用程序使用完整日历。在计算机上查看时，我希望它显示整个月份（dayGridMonth）。但在移动设备上查看时，我希望它只显示日期 (dayGridDay)。

我的代码不允许这种情况发生怎么办？

document.addEventListener('DOMContentLoaded', function() {
   var calendarEl = document.getElementById('calendar');
   var calendar = new FullCalendar.Calendar(calendarEl, {
      events: 'fetchSchedule.php',
      selectable: false,
   });

   $(window).resize(function() {
      if(window.innerWidth < 800){
      $('#calendar').fullCalendar('changeView', 'dayGridDay');
      } else {
      $('#calendar').fullCalendar('changeView', 'dayGridMonth');
      }
   });

   calendar.render();
});
    

Answer 1

使用 windowResize 触发器。

function( arg: { view } )

当触发 windowResize 时，日历已自动适应新的大小。

$('#calendar').fullCalendar({
    windowResize: (arg) => { // your code}
  });