Search code examples
angularfullcalendarfullcalendar-6

Changing Event Display Font size

How to change the event display font size in fullcalendar v6 based on the picture show.As in the picture my font size for the event display is too small. Is it possible to change only font size of the event instead of changing the font size of whole calendar.

1

Solution

  • If you are using default renderer, then you can use the below CSS, we need to add to the styles.css or global-styles.css (the global styles for angular file)

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

    Stackblitz Demo

    If you are using custom events using eventContent Then

    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 Demo