title: fullcalendar dynamically change default view based on screen width
body: <p>I'm using fullcalendar and the below code works for me to render fullcalendar while also using turbolinks. </p>
  
  <pre><code>function eventCalendar() {
    return $('#event_calendar').fullCalendar({
      defaultView: 'agendaWeek',
      header: {
          left: 'prev,today,next',
          center: 'title',
          right: 'agendaDay,agendaWeek'
      },    
    });
  };
  function clearCalendar() {
    $('#event_calendar').fullCalendar('delete'); // In case delete doesn't work.
    $('#event_calendar').html('');
  };
  $(document).on('turbolinks:load', eventCalendar);
  $(document).on('turbolinks:before-cache', clearCalendar)
  </code></pre>
  
  <p>However I want to <strong>dynamically</strong> <code>changeView</code> the <code>defaultView</code> based on <code>screenWidth</code>. Something like this, but it's not working for some reason:</p>
  
  <pre><code>if (window.innerWidth &lt; 800) {
              $('#event_calendar').fullCalendar('changeView', 'agendaDay');
          }
  </code></pre>
  
  <p>or </p>
  
  <pre><code>if(window.innerWidth &lt; 800){
      $('#event_calendar').fullCalendar('changeView', 'agendaDay');
  }else{
      $('#event_calendar').fullCalendar('changeView', 'agendaWeek');
  }
  </code></pre>
  
  <p>How can I adapt it to my calendar? Please help!</p>