2016-11-24 3 views
0

私はfullCalendarを使用してGoogleカレンダーを表示しています。カレンダーをagendaDayviewに変更します。現在、私は、ビューを変更するには、コードブロックを使用しています:FullCalendar - changeViewが動作しない

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

これは私のカレンダーが設定されている方法です。

$(document).ready(function() { 
     $('#calendar').fullCalendar({ 
      googleCalendarApiKey: 'AIzaSyDIQZLuITK90tlTtdHN4cSkdLW9aRznnL4', 
      events: { 
       googleCalendarId: '[email protected]' 
      } 
     }); 
    }); 

そして、私はブートストラップを使用していますので、私はこのHTMLを持っています:

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

私は何か基本的なものが欠けていると確信しています。私はウェブプログラミングに新しいです。どんな助けもありがとう。

ありがとうございました。

答えて

1

結果についてはwindowサイズ変更イベントを聞く必要があります。あなたはjQueryを使ってそれを聞くことができます。それ以外はOKです。

$(document).ready(function() { 
    $('#calendar').fullCalendar({ 
     googleCalendarApiKey : 'AIzaSyDIQZLuITK90tlTtdHN4cSkdLW9aRznnL4', 
     events : { 
      googleCalendarId : '[email protected]' 
     } 
    }); 
    $(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()

これはあなたが望んでいない場合は、私たちに知らせてください。

関連する問題