Have full calendar viewable regardless of screen size (remove horizontal scrolling)

Ask the Community Customization
1

Is it possible to have the event calendar display within the widget’s container/screen—when using the month layout—rather than requiring a user to scroll horizontally to see everything? If that’s not possible, can I make it change layouts on smaller screens?

image
image393×717 18.4 KB

3

Hi @lilykgamble :waving_hand:

If all days of the month appear right away on mobile, the calendar cells will be too narrow. Something like this:

image
image406×781 30.3 KB

Would you still like to display all days at once or would you prefer using a different mobile layout? If you’d like to switch the layout, which one would you prefer for mobile?

4

Hey Max, thanks for your help!

That makes sense. I’d like to change the layout for whatever the screen size is where the horizontal scrolling starts. Can we make it change to the list layout?

5

Sure, I’ve sent the solution in a direct message :slightly_smiling_face:

6

@Max Hi, I am looking for the same solution. I am not happy with having to sidescroll on mobile. I want the full calendar to fit side to side in mobile view even if the columns are narrow.

7

Hi @GT_Women_s_Club :waving_hand:

I’ve checked your widgets and see that you’re using Grid and List layouts. Do I get it right that you’re planning to use the Month layout if the full calendar is displayed right away?

8

Hi @Max yes I wanting to display full calendar view on events page. I am happy with the view for desktop but I don’t like how width of calendar on mobile is so wide that scrolling is required. I would prefer to have a narrow calendar even if events are not readable. Maybe even if you can see that day is a color dot that matches an associated tag is enough.

I need a compact calendar or I am not sure if this product will work for us.

Also, I am dynamically creating a calendar using the code from here (How to Dynamically Change the Event Calendar Layout - Elfsight Help Center). On the homepage I am doing a carousel. Different pages has different use displays of events.

9

Got it, thanks!

Could you please send me a link to the page where you’re going to use a Month layout? I’ll be happy to check if we have a custom solution :slightly_smiling_face:

10

Hi @Max I sent you a message.

11

Thanks! I’ve forwarded your request to the devs and will update you once I have their response :slightly_smiling_face:

12

Thanks!

13

Please add this code to the Custom CSS field on the Style tab of your widget’s settings and let me know if you like the result:

@media (max-width: 768px) {
  .es-background-container {
    border-radius: 6px !important;
  }
  .es-widget-background-wrapper {
    padding: 8px !important;
  }
  .eapp-events-calendar-calendar-header-container {
    padding-top: 0px;
  }
  .eapp-events-calendar-week-header-wrapper,
  .eapp-events-calendar-fullcalendar-wrapper {
    min-width: 0px;
  }
}