Mobile display for Monthly schedule style

I love your Event Calendar, unfortunately the display is not ideal for mobile view. Only the first letter of the event name can be displayed, and the calendar is a bit long to read if there are several events on a day. May I know is there any suggestion on CSS code / setting that I may adjust to improve the mobile view layout of my calendar?

Thank you so much for help!

1 Like

Hi @Dorothy1! Happy to see you here! Welcome to Community :tada:

Your idea is awesome and I bet this option added to the editor would be really useful for many users. We’ll try to consider your suggestion in our future updates!

Thank you for sharing this idea :heart:

As for now, unfortunately, it’s impossible to change the calendar length on mobile. I am so sorry!

To decrease the size of the event name, add this CSS code to the Custom CSS field on the Appearance tab and let me know if it helped:

@media screen and (max-width: 480px) {
    .fc-event-title {
      height: 22px;
      font-size: 8px !important;
      word-break: break-all;
      padding: 0;
    }
    
    .fc-event-time {
      font-size: 8px !important;
    }
    
    .fc-daygrid-event {
      white-space: normal;
    }
}

Please check it and let me know if it helped :slightly_smiling_face:

17 posts were split to a new topic: Event Calendar Customization request

The mobile view for Calendar view is not asthetically pleasing. You can only see the first or second letter of each event so you have to click on it to see what it is. I like the view on our webpage for computer or tablet use, but most people use their phones and don’t like the way that looks. Any suggestions?

1 Like

Hi @Mark_Oshman and welcome aboard :tada:

I am very sorry our widget doesn’t support this feature. We already have such a request in our Wishlist and I moved your request to the dedicated topic. All the updates will be posted here :slightly_smiling_face:

In the messages above, we’ve shared CSS codes to decrease the size of the event names. You are very welcome to check it :slightly_smiling_face:

A huge thank you for adding your idea to our Wishlist!

1 Like

Has there been any update on making the month view more mobile friendly? Please let me know.

@Nancy_Lerma I’m really sorry but I don’t have any news about this request as yet :disappointed:

However, this is the code our devs have prepared to improve the mobile view:

.eapp-events-calendar-calendar-component .fc-daygrid-event {
  white-space: normal;
}
@media screen and (max-width: 480px) {
  .fc-event-title {
    height: 22px;
    font-size: 8px !important;
    word-break: break-all;
    padding: 0;
  }

  .fc-event-time {
    font-size: 8px !important;
  }

  .fc-daygrid-event {
    white-space: normal;
  }
  
  /* Widget Margins */
  [class*="WidgetBackground__Container-sc"] {
    padding: 4px;
  }
}

Hi Helga - thank you! That is a little better.

1 Like

@Nancy_Lerma Awesome, thanks a lot for sharing! :heart_eyes: