FullCalendar - changeView funktioniert nicht

Question

Ich verwende fullCalendar, um einen Google Kalender anzuzeigen. Ich möchte, dass der Kalender in eine agendaDayview geändert wird. Derzeit verwende ich diesen Code-Block um die Ansicht zu ändern:

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

Dies ist, wie mein Kalender eingerichtet ist:

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

Und ich bin mit Bootstrap, so habe ich diese HTML :

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

Ich bin sicher, dass ich etwas Grundlegendes vermisse. Ich bin neu in der Webprogrammierung. Jede Hilfe wäre willkommen.

Danke.

Answer 1

Sie müssen die window Resize-Ereignis für das Ergebnis hören. Sie können jQuery verwenden, um so zu hören. Ansonsten sieht es OK aus.

$(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()

Wenn dies nicht das, was Sie gewünscht wird, lassen Sie es uns wissen.