更改事件显示字体大小

Question

如何根据图片显示在 fullcalendar v6 中更改事件显示字体大小。如图所示，我的事件显示字体太小。是否可以仅更改事件的字体大小，而不更改整个日历的字体大小。

Answer 1

如果您使用默认渲染器，那么您可以使用下面的CSS，我们需要添加到

styles.css

或

global-styles.css

（角度文件的全局样式）

.fc-event-main-frame .fc-event-time,
.fc-event-main-frame .event-details {
  font-size: 20px !important;
}

Stackblitz 演示

如果您使用自定义事件使用

eventContent

那么

private customEventContent(arg: EventContentArg) {
    const eventInfo = arg.event.extendedProps;
    const dummy =
      '<div class="event-details">' +
      '<div>Name: ' +
      eventInfo['name'] +
      '</div>' +
      '<div>Employee ID: ' +
      eventInfo['employeeId'] +
      '</div>' +
      '<div>Time: ' +
      arg.timeText +
      '</div>' +
      '</div>';

    const details = `<div class="event-details tooltip" style="font-size: 20px;cursor: pointer ;text-align: center"><div>${eventInfo['name']}
    
  <span class="tooltiptext">${dummy}</span>
    </div>`;

    return { html: details };
  }

Stackblitz 演示