FullCallendar — как растянуть на весь экран/блок?

Question

[mindgrow]

Добрый день!

В проекте на одной из страниц есть элемент FullCalendar, как сделать так, чтобы он растягивался на весь родительский блок?

UPD:
ссылка на git https://github.com/vailukhin/CalendarStretch
ссылка на страницу https://github.com/vailukhin/CalendarStretch/blob/...

Comments

[mindgrow]

Пробовал
height:100%
width:auto

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

Answer 1

[Nick Sdk]

Здесь смотрели?

В частности Блок с календарем #calendar
есть стили max-width, к примеру
у вас как?

Comments

[mindgrow]

Указал max-width:100%, календарь растянулся по ширине, но и по длине тоже. Появилась полоса прокрутки, а так не должно быть. Можно сделать так, чтобы по высоте календарь не растягивался более размера экрана?

[Nick Sdk]

Viktor_Ilukhin, нужно больше данных)
скиньте пример кода, где лежит блок с календарем.
родительский блок. какие у него стили?
может что-то удастся придумать

[mindgrow]

Вот так выглядит мастер-страница календаря

@section Scripts {

    @Scripts.Render("~/AdminLTE/plugins/jquery-ui/js")
    @Scripts.Render("~/AdminLTE/plugins/momentjs/js")
    @Scripts.Render("~/AdminLTE/plugins/fullcalendar/js")

    @Scripts.Render("~/Scripts/Home/Calendar.js")
}



    <div class="row">



    @*<div class="col-md-9">*@
    <div style="max-width:100%;max-height:100%;" >
        <div class="box box-primary">
            <div class="box-body no-padding">
                <div id="calendar" ></div>



            </div>
        </div>
    </div>
</div>

[mindgrow]

Nicolas Serdyuk, загрузил календарь на git https://github.com/vailukhin/CalendarStretch/blob/...

[Nick Sdk]

Viktor_Ilukhin, в скрипте WebApplication/Scripts/Calendar/Calendar.js
добавьте параметр height, как описано в документации
и присвойте ему значение "parent"
но потом, в свою очередь смотрите, чтобы родительский элемент для календаря имел "правильный" height
возможно скриптом ему выставите нужное значение

[Nick Sdk]

Viktor_Ilukhin, в общем, я бы сделал еще типа такого

height: function () {
    return window.innerHeight * 0.9;
},

попробуйте

[mindgrow]

Nicolas Serdyuk, вот так?

$('#calendar').fullCalendar({

        height: function () {
            return window.innerHeight * 0.9;
        },
...

[Nick Sdk]

Viktor_Ilukhin, да
как один из параметров

[Nick Sdk]

Viktor_Ilukhin,