css - 手机版Fullcalendar设置高度

Question

我在一个 Angular 元素中使用全日历。我的问题是:我如何在使用手机时更改日历的高度？我试过 contentHeight，但没有用(我想在更改分辨率时更改高度)。那就是变量 calendarOptions:

public calendarOptions: any = {
    eventLimit: true,
    contentHeight: () => {
        if (screen.height < 577) {
            $('#calendar').fullCalendar({
                contentHeight: 600
            });
        } else {
            $('#calendar').fullCalendar({
                contentHeight: 'auto'
            });
        }
    },
    timeFormat: 'HH:mm',
    monthNames: [
        'Gennaio',
        'Febbraio',
        'Marzo',
        'Aprile',
        'Maggio',
        'Giugno',
        'Luglio',
        'Agosto',
        'Settembre',
        'Ottobre',
        'Novembre',
        'Dicembre',
    ],
    showNonCurrentDates: false,
    monthNamesShort: [
        'Gen',
        'Feb',
        'Mar',
        'Apr',
        'Mag',
        'Giu',
        'Lug',
        'Ago',
        'Set',
        'Ott',
        'Nov',
        'Dic',
    ],
    header: {
        left: 'prev,next,today',
        center: 'title',
        right: 'month,agendaWeek,listDay',
    },
    buttonText: {
        today: 'Oggi',
        month: 'Mese',
        week: 'Settimana',
        day: 'Giorno',
    },
    events: [],
    selectable: true,
    eventRender: (event, element) => {
        element.html(
            '<div style="padding: 3px; height: 100%;" *ngFor="let event of events"' +
            ' class="c-label-appointment event-state-' + event.attributes.status + ' event-esit-' + event.attributes.esit + '">' +
            '<span class="fc-time">' +
            moment(event.start).format('HH:mm') + '</span>' +
            ' <span class="fc-nomeCliente"><strong>' + event.attributes.customer.name +
            ' ' + event.attributes.customer.surname + '</strong></span>' +
            '</div>',
        );
    },
};

下面的代码是Html文件:

        <div class="col col-md-12 calendar-container">
        <div class="panel">
            <div class="panel-body with-padding container-calendar">
                <div class="opacity-black-calendar" *ngIf="isWorking"></div>
                <angular2-fullcalendar id="calendar" [options]=""></angular2-fullcalendar>
            </div>
        </div>
    </div>

我正在使用 Bootstrap 断点(最大宽度 < 576 时的移动版本)。

Answer 1

我只是将以下选项添加到 calendarOption 中:

 contentHeight: ()=>{
      console.log(screen.width);
      if(screen.width < 577) {
            return 600
        } else {
            return 1000
        }
      },