我在一个 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 时的移动版本)。
最佳答案
我只是将以下选项添加到 calendarOption 中:
contentHeight: ()=>{
console.log(screen.width);
if(screen.width < 577) {
return 600
} else {
return 1000
}
},
关于css - 手机版Fullcalendar设置高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49380033/