title: Change fullCalendar view and header options based on viewport width?
body: <p><a href="http://fullcalendar.io" rel="nofollow noreferrer">fullCalendar</a> is a jquery calendar plugin. I'm using it to present data from one google calendar.</p>
  
  <p>I have two viewport width breakpoints for which I'd like the combination of <strong>default calendar view</strong> and <strong>calendar header options</strong> to be different.</p>
  
  <p>At less than 700px viewport:</p>
  
  <ul>
  <li>the default view should be <code>agendaDay</code> and there should be no header button options available to change the view, e.g., to <code>agendaWeek</code> or <code>month</code>.</li>
  </ul>
  
  <p>At greather than 700px viewport:</p>
  
  <ul>
  <li>The default view should be <code>agendaWeek</code> and there should be header buttons available for choosing different views (like <code>agendaDay</code> and <code>month</code> along with the default view of <code>agendaWeek</code>).</li>
  </ul>
  
  <p>I have working code for the larger viewport combination of calendar view and header options (see below).</p>
  
  <p>My question is what javascript will present a default view of <code>agendaDay</code> with no header options if the viewport width is below 700px, or a default view of <code>agendaWeek</code> with header options to change the view if the viewport width is 700px or more?</p>
  
  <pre><code>&lt;script src="/libs/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="/libs/moment/moment.js"&gt;&lt;/script&gt;
  &lt;script src="/libs/fullcalendar/dist/fullcalendar.min.js"&gt;&lt;/script&gt;
  &lt;script src="/libs/fullcalendar/dist/gcal.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    $('#calendar').fullCalendar({
      googleCalendarApiKey: 'key',
      events: {
        googleCalendarId: 'id'
      },
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'agendaDay,agendaWeek,month'
      },
      eventBackgroundColor: 'transparent',
      eventBorderColor: '#08c',
      eventTextColor: 'black',
      height: 'auto',
      defaultView: 'agendaWeek',
      allDaySlot: false,
    });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Notes</strong></p>
  
  <ul>
  <li><p>Inside the code above, the <code>right: "agendaDay,agendaWeek,month"</code> key:value pair renders the header view option buttons that I would like to be removed for widths under the breakpoint of 700px.</p></li>
  <li><p><a href="https://stackoverflow.com/questions/18195906/how-can-i-get-adam-shaws-fullcalendar-to-display-responsive-in-a-rails-4-app">This stack overflow post</a> is somewhat related but only looks at changing the default view based on viewport width.</p></li>
  </ul>