Jak mogę sprawić, by Adam Shaw FullCalendar wyświetlał responsywną aplikację w szynach 4?
Używam Ruby 2 Rails 4. Używam klejnotu twitter-bootstrap-rails, aby zwinąć pasek nawigacyjny po zmianie rozmiaru przeglądarki.
Chcę podobny efekt z FullCalendar Adama Shawa. Teraz zmieni się rozmiar z oknem, ale chcę, aby był wyświetlany jeden dzień (widok basicDay), gdy przeglądarka ma 480px lub mniej, jeden tydzień (widok basicWeek), gdy rzutnia jest poniżej 767, a widok miesiąca w całości -size okno.
Czy lepiej jest inicjować trzy różne kalendarze w przypadku przeglądarek o różnych rozmiarach?
to znaczy:
<script> $(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
events: 'http://www.google.com/calendar/myfeed',
if $(window).width() < 514){
defaultView: 'basicDay'
}
header: {
left: 'title',
center: '',
right: 'today basicDay basicWeek month prev,next'
},
});
});
</script>
A może jest o wiele łatwiejsze i prostsze rozwiązanie?
Poza tym jestem w tym naprawdę nowy. Wiem, że powyższy przykładowy kod nie zadziała tak, jak napisano, ale czy jestem przynajmniej na dobrej drodze?
Dzięki i przepraszam, jeśli to jest napisane gdzieś indziej, nie mogłem go znaleźć, ale byłbym zadowolony, gdyby ktoś wskazał mi właściwy kierunek.
AKTUALIZACJA:
W odpowiedzi na pierwszy komentarz, aby go uruchomić, poszedłem do pliku fullcalendar.js i zmieniłem sposób działania głównego renderowania (linia 240)
/* Main Rendering
-----------------------------------------------------------------------------*/
setYMD(date, options.year, options.month, options.date);
function render(inc) {
if (!content) {
initialRender();
}
else if (elementVisible()) {
// mainly for the public API
calcSize();
_renderView(inc);
}
}
function initialRender() {
tm = options.theme ? 'ui' : 'fc';
element.addClass('fc');
if (options.isRTL) {
element.addClass('fc-rtl');
}
else {
element.addClass('fc-ltr');
}
if (options.theme) {
element.addClass('ui-widget');
}
content = $("<div class='fc-content' style='position:relative'/>")
.prependTo(element);
header = new Header(t, options);
headerElement = header.render();
if (headerElement) {
element.prepend(headerElement);
}
changeView(options.defaultView);
if (options.handleWindowResize) {
$(window).resize(windowResize);
}
// needed for IE in a 0x0 iframe, b/c when it is resized, never triggers a windowResize
if (!bodyVisible()) {
lateRender();
}
// added this to specify how initial rendering should act on mobile devices.
if ( $(window).width() < 480){
changeView('agendaDay')
};
}
Jak widać, dodałem jednak „if ($ (window) .width ...”, jednak samo w sobie nie jest to doskonałe rozwiązanie, ponieważ rozwiązuje tylko połowę mojego problemu. Początkowe renderowanie jest poprawne zarówno w wersji mobilnej, jak i okna przeglądarki, ale kalendarz nie reaguje na zmiany rozmiaru w oknach przeglądarki. Włączenie odpowiedzi MarCrazyness do powyższego rozwiązania rozwiązało problem zmiany rozmiaru w przeglądarkach.
Mój widok wygląda teraz tak:
Schedule.html.erb $ (document) .ready (function () {
$('#calendar').fullCalendar({
events: 'http://www.google.com/calendar/...',
weekMode: 'liquid',
defaultView: 'agendaWeek',
allDaySlot: false,
header: {
left: 'title',
center: 'agendaDay,agendaWeek,month',
right: 'today prev,next'
},
windowResize: function(view) {
if ($(window).width() < 514){
$('#calendar').fullCalendar( 'changeView', 'agendaDay' );
} else {
$('#calendar').fullCalendar( 'changeView', 'agendaWeek' );
}
}
});
});
</script>
Uwaga: Zmieniłem ustawienia nagłówka, ale nie jest to konieczne, aby to rozwiązanie działało.
Mam nadzieję, że jedna lub kilka z tych dwóch taktyk spełni twoje potrzeby, jeśli masz rozwiązanie prostsze, albo zaliczki albo odpowiedzą, proszę wskocz i dziękuję bardzo wszystkim za całą pomoc.