javascript - FullCalendar - 更改 View 不工作

Question

我正在使用 fullCalendar 来显示 Google 日历。我希望日历更改为 agendaDay view 。目前，我正在使用此代码块来更改 View :

if (($(window).width() / $(window).height()) < 0.95) {
    console.log("Here");
    $('#calendar').fullCalendar('changeView', "agendaDay")
}

这就是我的日历的设置方式:

    $(document).ready(function() {
        $('#calendar').fullCalendar({
            googleCalendarApiKey: 'AIzaSyDIQZLuITK90tlTtdHN4cSkdLW9aRznnL4',
            events: {
                googleCalendarId: 'db25n7oev1at726gljle5d784c@group.calendar.google.com'
            }
        });
    });

而且，我正在使用 Bootstrap，所以我有这个 HTML:

  <div class="container first-container">
    <div class="col-md-12">
      <h2 class="about-calendar">Calendar</h2>
      <hr>
        <div id='calendar'></div>
    </div>
  </div>

我确信我错过了一些基本的东西。我是网络编程新手。任何帮助将不胜感激。

谢谢。

Answer 1

您需要监听window调整大小事件以获取结果。你可以像这样使用 jQuery 来监听。除此之外看起来还不错。

 $(document).ready(function () {
    $('#calendar').fullCalendar({
        googleCalendarApiKey : 'AIzaSyDIQZLuITK90tlTtdHN4cSkdLW9aRznnL4',
        events : {
            googleCalendarId : 'db25n7oev1at726gljle5d784c@group.calendar.google.com'
        }
    });
    $(window).resize(function () {
        console.log(($(window).width() / $(window).height()));//can be removed
        if (($(window).width() / $(window).height()) < 0.95) {
            console.log("Here");
            $('#calendar').fullCalendar('changeView', "agendaDay") //Change this accordingly
        } else {
            $('#calendar').fullCalendar('changeView', "agendaWeek") //Change this accordingly
        }
    });
 });

.resize()

如果这不是您想要的，请告诉我们。