Add a text wrap option for the calendar display

Ask the Community Customization
1

I want to be able to have the entire event displayed without having to click on it for display on the website. Esp in mobile view.

1 Like
3

Hi there @Amber_Eaves :wave:

Our devs came up with a custom code for you case:

.eapp-events-calendar-calendar-component
.fc-event-title {
  white-space: normal;
  word-break: break-all;
}

@media (max-width: 600px) {
  [class*="WidgetBackground__Container-sc-"],
  .eapp-events-calendar-calendar-mobile 
  .fc-event-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .eapp-events-calendar-calendar-mobile 
  .fc-daygrid-event {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

Just add it to the Custom CSS field on the Appearance tab of your widget’s settings and let me know if it helped :slightly_smiling_face:

4

Hi there!

I just changed one line to

word-break: normal;

instead and it’s just what I needed! Thank you so much!

2 Likes
5

Great! You are welcome :wink: