Currently, the order of the calendar elements is fixed to display in the following order:
Event Type
Event title
Tags
Time
Venue
I also can’t display the event host on the calendar, it only shows up in the popup.
I want to be able to move this around so I would have the option to have event title on the top, followed by whatever element I please.
ADDITIONALLY, we need to be able to edit font size of ALL ELEMENTS.
Currently, I have to do a completely RIDICULUS workaround where
I put the event title in the event type section
I put the host name in the event title section and use small font so that the event type is bigger (because that now serves as the event title).
So in short:
Ability to select the order of the event elements I want to display
Ability to select to display event host
Ability to edit font size of all elements, not just event title.
2 Likes
Max
January 6, 2024, 6:01pm
2
Hi @user887
We already have a request for the Host to be included in the event elements to display. You can vote for this feature to keep up with the latest updates - Allow Host to be included in Event Elements
As for changing the font size and order of the elements, I’ll check if anything can be done with our dev team. I’ll get back to you once I receive a response from them
1 Like
Max
January 8, 2024, 12:33pm
4
Thank you for waiting!
Here is the code to change the font size of all elements:
/* Category */
.eapp-events-calendar-category-item {
font-size: 20px;
}
/* Name */
.eapp-events-calendar-name-component {
font-size: 20px;
}
/* Tags */
.eapp-events-calendar-tags-item {
font-size: 20px;
}
/* Location and time */
.eapp-events-calendar-slider-item-locationAndTime * {
font-size: 20px;
}
/* Popup category */
.global-styles,
.eapp-events-calendar-popup-item-category {
font-size: 20px;
}
/* Popup name */
.global-styles,
.eapp-events-calendar-popup-item-name {
font-size: 20px;
}
/* Popup tags */
.global-styles,
.eapp-events-calendar-popup-item-tags .eapp-events-calendar-tags-item {
font-size: 20px;
}
/* Popup description */
.global-styles,
.eapp-events-calendar-popup-item-description {
font-size: 20px;
}
/* Popup time */
.global-styles,
.eapp-events-calendar-popup-item-time * {
font-size: 20px;
}
/* Popup location */
.global-styles,
.eapp-events-calendar-popup-item-location * {
font-size: 20px;
}
/* Popup host */
.global-styles,
.eapp-events-calendar-organizer-component * {
font-size: 20px;
}
/* Popup share */
.global-styles,
.eapp-events-calendar-share-title,
.eapp-events-calendar-share-content * {
font-size: 20px;
}
To change the order of the event elements, please use this code:
/* Category order */
.eapp-events-calendar-category-component {
order: 4;
}
/* Name order */
.eapp-events-calendar-name-component {
order: 3;
}
/* Tags order */
.eapp-events-calendar-tags-component {
order: 2;
}
/* Location and time order */
.eapp-events-calendar-slider-item-locationAndTime {
order: 1;
}
Check it out and let me know if it worked
1 Like
user887
February 11, 2024, 11:16am
5
Hi,
It did work! Any way to show host instead of event type?
2 Likes
Max
February 12, 2024, 11:21am
6
Hi @user887
Glad to hear that the code worked for you!
Unfortunately, there is no option to include host in the event elements for now. I am really sorry!
As I mentioned in the previous message, we already have such a request in the Wishlist. You can vote for this option to keep tabs on it
1 Like
The code for location and time isnt working. Following is the code to edit these informations and as additional benefit to edit them seperatly.
/* Time */
/* Location */
2 Likes
Max
February 3, 2025, 10:40am
8
Hi there, @user20529
Yep, this was a code for the widget with a Slider layout, that’s why it didn’t completely work in your case.
However, that’s great that you’ve already found a solution and share it with the Community. Many thanks for your input!
If anything else comes up, don’t hesitate to contact us here. We’ll be happy to help
1 Like
