Event calendar: Change order of elements, edit font size on all elements and display event host

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.
1 Like

Hi @user887 :wave:

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 :slightly_smiling_face:

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 :slightly_smiling_face:

Hi,

It did work! Any way to show host instead of event type?

1 Like

Hi @user887 :wave:

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 :wink: