Angular项目中FullCalendar移动端自适应高度设置问题

首先，你原来的contentHeight写法存在逻辑问题——在回调里重新调用$('#calendar').fullCalendar({...})是无效的，因为contentHeight的回调本身就是用来返回高度值的，不需要再手动去修改实例配置。下面给你两种靠谱的实现方案：

方式一：直接通过contentHeight回调返回动态值 #

直接在回调里根据屏幕高度返回对应数值，这是最简洁的实现方式：

public calendarOptions: any = {
  eventLimit: true,
  contentHeight: () => {
    // 直接根据屏幕高度返回目标高度
    return screen.height < 577 ? 600 : 'auto';
  },
  // 你的其他配置项（比如timeZone等）
  timeZone: 'local',
  // ...
};

方式二：监听窗口 resize 事件实时调整 #

如果需要支持窗口大小变化时也能实时更新高度（比如用户旋转手机屏幕），可以结合Angular的生命周期钩子来实现：

1. 先在模板里给FullCalendar组件添加引用标识：

<full-calendar #calendar [options]="calendarOptions"></full-calendar>

2. 在组件代码中实现监听与动态更新：

import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
import { FullCalendarComponent } from '@fullcalendar/angular';

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css']
})
export class CalendarComponent implements OnInit, OnDestroy {
  @ViewChild('calendar') calendarComponent!: FullCalendarComponent;
  private resizeHandler?: () => void;

  public calendarOptions: any = {
    eventLimit: true,
    contentHeight: 'auto', // 初始高度
    // 其他配置项
  };

  ngOnInit(): void {
    // 初始化时先设置一次高度
    this.adjustCalendarHeight();
    // 监听窗口resize事件
    this.resizeHandler = () => this.adjustCalendarHeight();
    window.addEventListener('resize', this.resizeHandler);
  }

  ngOnDestroy(): void {
    // 组件销毁时移除监听，避免内存泄漏
    if (this.resizeHandler) {
      window.removeEventListener('resize', this.resizeHandler);
    }
  }

  private adjustCalendarHeight(): void {
    const calendarApi = this.calendarComponent.getApi();
    const targetHeight = screen.height < 577 ? 600 : 'auto';
    // 通过官方API修改高度配置
    calendarApi.setOption('contentHeight', targetHeight);
  }
}

额外小提示 #

• 如果你使用的是FullCalendar v5+，注意contentHeight在月视图这类无时间轴的视图中可能不生效，这类场景可以尝试用height配置项替代。
• 在Angular中尽量避免直接用jQuery操作DOM，优先通过FullCalendar官方提供的getApi()方法获取实例后修改配置，更符合Angular的组件化开发思想。

内容的提问来源于stack exchange，提问作者user7272904