Angular中FullCalendar如何条件隐藏特定事件的时间

你可以通过自定义事件内容或者事件挂载后修改DOM的方式，实现只隐藏特定事件的时间，而不影响其他事件。以下是两种可行方案：

方案1：使用eventContent自定义事件渲染内容 #

在calendarOptions中添加eventContent配置，根据事件的自定义属性判断是否渲染时间：

this.calendarOptions = {
  initialView: 'timeGridWeek',
  timeZone: 'utc',
  dateClick: this.onDateClick.bind(this),
  showNonCurrentDates: false,
  datesSet: this.handleMonthChange,
  // 自定义事件内容
  eventContent: function(arg) {
    // 构建事件主体标题
    const title = document.createElement('div');
    title.className = 'fc-event-title';
    title.textContent = arg.event.title;

    // 判断是否需要显示时间：仅当事件未标记hideTime时渲染时间
    if (!arg.event.extendedProps.hideTime) {
      const time = document.createElement('div');
      time.className = 'fc-event-time';
      time.textContent = arg.timeText;
      return { domNodes: [time, title] };
    } else {
      return { domNodes: [title] };
    }
  },
  events: function(fetchInfo, successCallback, failureCallback) {
    // 给需要隐藏时间的事件添加自定义标记
    return {
      ...x,
      start: date, 
      startStr: date,
      endStr: date,
      end: date, 
      allDay: true,
      isEventeditable: false,
      backgroundColor: color,
      borderColor: color,
      hideTime: true // 仅对目标事件设置该属性
    };
  }
};

方案2：使用eventDidMount动态修改DOM #

如果不想自定义整个事件结构，可以在事件挂载完成后，根据自定义属性隐藏时间元素：

this.calendarOptions = {
  initialView: 'timeGridWeek',
  timeZone: 'utc',
  dateClick: this.onDateClick.bind(this),
  showNonCurrentDates: false,
  datesSet: this.handleMonthChange,
  // 事件挂载后处理DOM
  eventDidMount: function(arg) {
    // 检查事件是否标记了隐藏时间，找到时间元素并隐藏
    if (arg.event.extendedProps.hideTime) {
      const timeElement = arg.el.querySelector('.fc-event-time');
      if (timeElement) {
        timeElement.style.display = 'none';
      }
    }
  },
  events: function(fetchInfo, successCallback, failureCallback) {
    return {
      ...x,
      start: date, 
      startStr: date,
      endStr: date,
      end: date, 
      allDay: true,
      isEventeditable: false,
      backgroundColor: color,
      borderColor: color,
      hideTime: true // 给目标事件加标记
    };
  }
};

补充说明 #

• 正常情况下allDay: true的事件不会显示时间，若你仍看到12:00 AM，建议检查date变量是否为纯日期格式（如YYYY-MM-DD），而非带时间的字符串。
• 你可以根据业务逻辑调整判断条件，比如根据事件类型、颜色等属性来决定是否隐藏时间，不一定局限于hideTime标记。

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