Passare alla vista basicDay in FullCalendar se viewport è 480px o meno?

Question

Esiste un modo semplice per modificare la visualizzazione per un utente in base alla dimensione della finestra corrente in FullCalendar?

Quello che mi piacerebbe fare è avere la vista mensile sul desktop e la vista giornaliera se si utilizza un iPhone o un dispositivo mobile. Al momento con la vista mensile tutti gli eventi sono compressi sul cellulare.

codice attuale:

$(document).ready(function() { 
    $("#primary #calendar").fullCalendar({ 
     header: { 
      left: 'prev,next', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 
     timeFormat: 'h(:mm)tt',   
     eventSources: [ 
      { 
       url: 'http://www.google.com/mycal1', 
       color: 'blue', 
       textColor: 'white' 
      }, 
      { 
       url: 'http://www.google.com/mycal2', 
       color: 'white', 
       textColor: 'black' 
      } 
     ] 
    }) 
}); 

Answer 1

Questo potrebbe non essere esattamente quello che stai cercando, ma può iniziare nella direzione giusta.

nostri siti web sono reattivi e abbiamo includono la funzione 'viewScreenSize' sulla maggior parte ogni pagina ...

var thisScreenWidth = 0, thisScreenHeight = 0; 
function viewScreenSize() { 
    if (typeof (window.innerWidth) === 'number') { 
     //Non-IE 
     thisScreenWidth = window.innerWidth; 
     thisScreenHeight = window.innerHeight; 
    } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { 
     //IE 6+ in 'standards compliant mode' 
     thisScreenWidth = document.documentElement.clientWidth; 
     thisScreenHeight = document.documentElement.clientHeight; 
    } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) { 
     //IE 4 compatible 
     thisScreenWidth = document.body.clientWidth; 
     thisScreenHeight = document.body.clientHeight; 
     screenWidth = thisScreenWidth; 
    } 
    // screenSize = div in page footer 
    $("#screenSize").html(thisScreenWidth + "x" + thisScreenHeight); 
} 

Quando fullCalendar viene caricato in '$ (document) .ready (function() {}' e la nostra larghezza dello schermo è portato oltre 601 ...

se (thisScreenWidth < 601) $ ('# calendario') fullCalendar ('ChangeView', 'basicDay');.

Quando lo schermo viene ridimensionato ..

Esempio di lavoro ... http://theelmatclark.com/AboutUs/Calendar - Ridimensiona semplicemente la finestra del browser: mentre ridimensiona, la larghezza/altezza corrente vengono visualizzate nel piè di pagina accanto al pulsante [Home].

Ci possono essere modi migliori, ma non ne ho ancora trovato uno. In bocca al lupo.

Domanda ... Qualcuno sa di un modo per dividere l'intestazione in più righe?