fullcalendar - die Größe Kalender auf Fenstergröße ändern

Question

Ich verwende fullcalendar (fullcalendar by adam shaw)

Ich frage mich, was ich tun müssen, so dass mein fullcalendar dynamisch Größe von der Größe des Browserfensters in Abhängigkeit ändert? Ich habe seine 'Render'-Funktion ein wenig untersucht, aber ich habe Schwierigkeiten, dies herauszufinden.

(dh wenn ein Benutzer ihre Fenster passt die Größe würde Ich mag fullcalendar nachzustellen seine Breite und Höhe zu einem richtigen Seitenverhältnis)

Answer 1

Das alles dokumentiert ist.

Mal sehen, versuchen, etwas entlang dieser Linien:

//function to calculate window height 
function get_calendar_height() { 
     return $(window).height() - 30; 
} 

//attacht resize event to window and set fullcalendar height property 
$(document).ready(function() { 
    $(window).resize(function() { 
     $('#calendar').fullCalendar('option', 'height', get_calendar_height()); 
    }); 


    //set fullcalendar height property 
    $('#calendar').fullCalendar({ 
      //options 
      height: get_calendar_height 
    }); 
}); 

ähnlich Nehmen Breite. Oder Sie könnten Kalender in div platzieren und Manipulationen auf diese Weise tun.

Answer 2

Ich googeln „responsive Kalender“, denn das ist, was man wollte ich Sie gerade denken Ich wusste nicht, wie ich es formulieren sollte. Ich glaube, die Links, die ich dir gegeben habe, sollten dich auf den Weg bringen. Ich gehe davon aus, dass Sie dies wegen Ihrer Tags mit Javascript/Jquery tun wollten. Wenn die Links nützlich sind, ist das auch in Ordnung, denn jetzt weißt du, wonach du suchen musst, Viel Glück!

Responsive Kalender Demos:
http://dbushell.com/demos/calendar/v1_03-01-12.html
http://www.manystrands.com/projects/calendar.html (Änderungen an der Agenda-Ansicht nach einem gewissen Grad.)

Mehr Info:
http://dbushell.com/2012/01/04/responsive-calendar-demo/

Answer 3

Für Breite haben wir den Kalender flexibel, mit dem ansprechenden Design anzupassen entlang, und es funktionierte recht gut auf größere Displays:

#calendar { 
    width: 100%; 
    margin: 0 auto; 
} 

Für jede andere Anpassung (Ändern Höhe oder Standardansicht), Verwendung das integrierte Ereignis windowResize für FullCalendar. Der Nachteil der akzeptierten Antwort ist, dass die Funktion bei jeder Größenänderung des Fensters WHILE ausgeführt wird. Umgekehrt wird das Ereignis windowResize nach dem Abschluss der Größenänderung ausgelöst.

Das Problem mit einem reaktionsschnellen Kalender ist, dass Sie immer noch dem Tisch ausgeliefert sind - ein schrecklicher Ort auf einem kleinen mobilen Bildschirm.

Für unser Projekt erzwingen wir die Tagesansicht zu erzwingen, wenn ein Benutzer auf einem Bildschirm kleiner als 769px war. Sie können unsere Methode in diesem Beispiel sehen. Wenn es für Sie nicht funktioniert, gibt es Ihnen zumindest eine Anleitung, wie Sie eine Lösung implementieren können, die dies tut.

var ww,view; 
$(function(){ 
    $('#calendar').fullCalendar({ 
     windowResize: function(view) { 
      ww = getWindowWidth(); 
      view = getView(); 
      var currentView = $('#calendar').fullCalendar('getView'); 
      if(view != currentView){ 
       $('#calendar').fullCalendar('changeView',view); 
      } 
      if(ww <= 768){ 
       $('.fc-header-right .fc-button').hide(); 
      }else{ 
       $('.fc-header-right .fc-button').show(); 
      } 
     } 
    }); 
}); 

Hier sind die Funktionen, die oben verwiesen wird:

function getWindowWidth(){ 
    return $(window).width(); 
} 
function getView(){ 
    return (ww <= 768) ? 'basicDay' : 'month'; 
}