Fullcalendar - изменение размера календаря при изменении размера окна

Я использую fullcalendar (fullcalendar by adam shaw)

Мне интересно, что мне нужно сделать, чтобы мой fullcalendar динамически менял размер в зависимости от размера окна браузера? Я немного заглянул в его функцию "рендеринга", но у меня возникли проблемы с этим.

(т.е. когда пользователь изменяет размер своего окна, я бы хотел, чтобы fullcalendar скорректировал его ширину и высоту в правильном соотношении сторон)

Ответ 1

Все задокументировано.

Посмотрим, попробуйте что-нибудь в этом направлении:

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

Применить аналогично ширине. Или вы можете разместить календарь в div и сделать манипуляции таким образом.

Ответ 2

Для ширины мы сделали календарь гибким, отрегулировали вместе с отзывчивым дизайном, и он работал довольно хорошо на больших дисплеях:

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

Для любой другой настройки (изменение высоты или представления по умолчанию) используйте встроенное событие windowResize для FullCalendar. Недостатком принятого ответа является то, что функция будет работать WHILE, когда окно изменяется, для каждого изменения пикселя. И наоборот, событие windowResize срабатывает ПОСЛЕ изменения размера.

Теперь проблема с отзывчивым календарем заключается в том, что вы по-прежнему находились во власти стола - ужасное место для небольшого мобильного экрана.

Для нашего проекта мы выбираем принудительный просмотр дня, если пользователь был на экране меньше 769 пикселей. Вы можете увидеть наш метод в этом примере. Если это не сработает для вас, по крайней мере, это даст вам некоторое представление о том, как реализовать решение, которое делает.

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

Вот перечисленные выше функции:

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

Ответ 3

Я googled "отзывчивый календарь", потому что это то, что вы хотели, я просто думаю, что вы не знали, как это сказать. Я верю, что ссылки, которые я вам предоставил, должны помочь вам. Я предполагаю, что вы хотели сделать это, используя javascript/jquery из-за ваших тегов. Если ссылки полезны, это тоже прекрасно, потому что теперь вы знаете, что искать, Удачи!

Отзывчивые демонстрации в календаре:
http://dbushell.com/demos/calendar/v1_03-01-12.html
http://www.manystrands.com/projects/calendar.html (Изменения в представлении повестки дня в определенной степени.)

Дополнительная информация:
http://dbushell.com/2012/01/04/responsive-calendar-demo/