fullcalendar - изменить размер календаря при изменении размера окна - PullRequest
Новая
       5

fullcalendar - изменить размер календаря при изменении размера окна

13 голосов
/ 02 апреля 2012

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

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

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

Ответы [ 4 ]

16 голосов
/ 02 апреля 2012

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

Давайте посмотрим, попробуйте что-то вроде этого: 

//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 и делать манипуляции таким образом.

8 голосов
/ 19 декабря 2013

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

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

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

Теперь проблема с адаптивным календарем состоит в том, что вы все еще находитесь во власти стола - ужасное место, чтобы находиться на маленьком мобильномscreen.

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

$(function(){
    var $calendar = $('#calendar');
    $calendar.fullCalendar({
        windowResize: function() {
            var ww = $(window).width();
            var view = (ww <= 768) ? 'basicDay' : 'month';
            var currentView = $('#calendar').fullCalendar('getView');
            if(view != currentView){
                $calendar.fullCalendar('changeView',view);
            }
            if(ww <= 768){
                $calendar.find('.fc-header-right .fc-button').hide();
            }else{
                $calendar.find('.fc-header-right .fc-button').show();
            }
        }
    });
});
0 голосов
/ 23 марта 2018

Поскольку текущее представление передается в обратном вызове windowResize.

Можно просто управлять отзывчивым поведением с помощью: 

$('#calendar').fullCalendar({
    # ...
    windowResize: function (view) {
        var current_view = view['name'];
        var expected_view = $(window).width() > 576 ? 'agendaWeek' : 'agendaDay';
        if (current_view !== expected_view) {
            $('#calendar').fullCalendar('changeView', expected_view);
        }
    }
})

Также необходимо убедиться, что handleWindowResize установлено на true (по умолчанию)

0 голосов
/ 02 апреля 2012

Я погуглил «отзывчивый календарь», потому что это то, что вы хотели, я просто думаю, что вы не знали, как это выразить.Я верю, что ссылки, которые я вам предоставил, должны помочь вам в этом.Я предполагаю, что вы хотели сделать это, используя 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/

...