Mobile display for Monthly schedule style

Wishlist Event Calendar
1

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!

Screenshot 2023-03-22 at 6.03.44 PM
Screenshot 2023-03-22 at 6.03.44 PM346×818 28.2 KB

4

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;
    }
}

image
image548×649 12.5 KB

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

22

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?

Screenshot_20230919_172639_Chrome
Screenshot_20230919_172639_Chrome1080×2340 189 KB

23

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!

24

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

25

@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;
  }
}
26

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

27

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

Max 35

Friends, quick update: we’ve started working on this feature and it’s in the Development stage now! :tada:

As usual, we’ll keep you posted on the progress here :blush:

3 Likes
Max 37

Hey everyone!

We’re happy to share that we’ve improved the display of the Monthly layout on mobile :tada:

Check this post for more details and share your feedback in the post thread :wink: - Event Calendar: [MAJOR UPDATE] Enjoy revamped Calendar layouts and expanded Google Calendar integration!🚀

2 Likes