On this webpage, I am using Eventprime to display events in a calendar view. By default, the calendar entries use a very small font size.
Increasing the font size took me a while. There is no clear description on the EventPrime page, and I could not find any helpful information in any forum.
I therefore had to debug the page to identify the correct elements to modify. Here is the custom CSS that you need to add to your webpage:
/* EventPrime Kalenderansicht - Monats/Wochen/Tag Ansicht */
/* Event-Zeit im Kalender */
.fc-event-time {
font-size: 14px !important;
font-weight: 500;
}
/* Event-Titel im Kalender */
.fc-event-title {
font-size: 12px !important;
font-weight: 600;
line-height: 1.4em;
}
/* Popup Event-Titel */
.ep_event_popup_title {
font-size: 18px !important;
font-weight: 600;
}
/* Popup Zeit und Datum */
.ep_event_popup_date_time_wrap,
.ep_event_popup_time,
.ep_event_popup_address,
.ep_event_popup_date {
font-size: 14px !important;
}
This increases the font size for each calendar entry, as well as for the pop-up that appears when you hover over an entry. I found this setting made the text much more readable. You can adjust the font size to your liking.
There are two ways to inject CSS: Either use the EventPrime settings custom CSS tab. Or you can use the custom CSS option in your theme customiser. I prefer the first option since this will not get lost when you change the theme, unlike the second option.
