fullcalendar - zmiana rozmiaru okna kalendarz na rozmiar

Question

Używam fullcalendar (fullcalendar by adam shaw)

Zastanawiam się, co muszę zrobić, aby moja fullcalendar dynamicznie zmienia rozmiar w zależności od rozmiaru okna przeglądarki? Sprawdziłem trochę jego funkcję "renderowania", ale miałem problemy z jej ustaleniem.

(czyli gdy użytkownik zmienia rozmiar swojego okna chciałbym fullcalendar przestawić jego szerokość i wysokość do właściwych proporcjach)

Answer 1

To wszystko jest udokumentowane.

Zobaczmy, spróbować czegoś wzdłuż tej linii:

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

Zastosuj podobna do szerokości. Albo umieścisz kalendarz w div i wykonasz manipulacje w ten sposób.

Answer 2

google „czułe kalendarz”, ponieważ to, co chciałeś mi tylko, że ty nie wiedziałem, jak to wymówić. Uważam, że linki, które ci podałem, powinny Cię zabrać. Zakładam, że chciałeś to zrobić używając javascript/jquery z powodu twoich tagów. Jeśli linki są użyteczne, jest to również w porządku, ponieważ teraz wiesz, czego szukać, Powodzenia!

Responsive Kalendarz Demos:
http://dbushell.com/demos/calendar/v1_03-01-12.html
http://www.manystrands.com/projects/calendar.html (zmiany widoku planera Po pewnym stopniu.)

Więcej informacji:
http://dbushell.com/2012/01/04/responsive-calendar-demo/

Answer 3

Dla szerokości, zrobiliśmy kalendarz elastyczny, aby dostosować wraz z elastycznym projektowaniu i to działało bardzo dobrze na większych wyświetlaczach:

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

dla każdej innej personalizacji (zmiana wysokości lub widok domyślny), należy użyć wbudowane zdarzenie windowResize dla FullCalendar. Wadą akceptowanej odpowiedzi jest to, że funkcja będzie działać PODCZAS zmiany rozmiaru okna, dla każdej zmiany piksela. Odwrotnie, zdarzenie windowResize wystrzeliło PO zakończeniu zmiany rozmiaru.

Problem z responsywnym kalendarzem polega na tym, że wciąż jesteś na łasce stołu - straszne miejsce na małym ekranie mobilnym.

Dla naszego projektu wybieramy wymuszenie widoku dnia, jeśli użytkownik był na ekranie o wielkości mniejszej niż 769 pikseli. Możesz zobaczyć naszą metodę w tym przykładzie. Jeśli to nie zadziała, przynajmniej wskaże ci, w jaki sposób wdrożyć rozwiązanie.

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

Oto funkcje mowa powyżej:

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