Wechsel zur basicDay-Ansicht in FullCalendar, wenn das Ansichtsfenster 480px oder weniger ist?

Question

Gibt es eine einfache Möglichkeit, die Ansicht für einen Benutzer basierend auf der aktuellen Ansichtsfenstergröße in FullCalendar zu ändern?

Was ich tun möchte, ist die Monatsansicht auf dem Desktop und die Tagesansicht, wenn Sie ein iPhone oder ein Mobilgerät verwenden. Im Moment mit Monatsansicht sind alle Events auf Mobile gequetscht.

Aktueller Code:

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

Dies kann nicht genau das, was Sie suchen, aber es kann Ihnen den Einstieg in die richtige Richtung zu bekommen.

Unsere Webseiten sind ansprechbar und wir auch die Funktion 'viewScreenSize' auf den meisten jeder Seite ...

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); 
} 

Wenn fullCalendar wird in '$ (document) .ready (function() {}' geladen und unsere Bildschirmbreite geführt als 601 ...

if (thisScreenWidth < 601) $ ('# Kalender') fullCalendar ('Change', 'basicDay.');

wenn der Bildschirm der Größe verändert wird ..

Arbeitsbeispiel ... http://theelmatclark.com/AboutUs/Calendar - Ändern Sie die Größe des Browserfensters. - Während Sie die Größe ändern, wird die aktuelle Breite/Höhe in der Fußzeile neben der [Home] -Schaltfläche angezeigt.

Es mag bessere Wege geben, aber ich habe noch keinen gefunden. Viel Glück.

Frage ... Kennt jemand eine Möglichkeit, den Header in mehrere Zeilen zu teilen?