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

问题描述 投票:0回答:1

我正在为我的网络应用程序使用完整日历。在计算机上查看时,我希望它显示整个月份(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();
});
    
php web-applications fullcalendar
1个回答
0
投票

使用 windowResize 触发器。

function( arg: { view } )

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

$('#calendar').fullCalendar({
    windowResize: (arg) => { // your code}
  });
© www.soinside.com 2019 - 2024. All rights reserved.