Make Event Calendar month view mobile-responsive

Ask the Community Customization
1

Is there any code injection that will make the Event Calendar month view mobile-responsive, so that it changes to the list or grid view on smartphones? My client is not liking the horizontal scroll on phones. Thanks!

2

Hi there, the attached code (from Elfsight community) didn’t work for me – the month-view Event calendar didn’t cause the mobile view to be responsive.

• Is it possible to make the month-view calendar switch over to the list or grid view on smartphones instead?

Thank you very much –

Barbara D.

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

5

Hi there, @Barbara_Davis :waving_hand:

Great news — we’ve got a solution that lets you set different layouts for desktop and mobile: Event Calendar: How to use different layouts on desktop and mobile

Give it a shot and let me know how it worked :wink:

6

Hi there, Well, because the client wanted a date-query feature on their calendar (an open-source script for which I found and stuck on the page for them), NOW your new Mobile responsive script (which is great) is in conflict with it. It has caused two copies of the calendar to appear, and I am not good enough at JS syntax to untangle them and make them get along.

What do you think?

I may need to inform the client they can’t have both: an off-brand date-query applet plus a proper mobile-responsive script from Elfsight.

Unless you wonderful Elfsight techs can untangle my Frankencode as a favor!

I await the verdict.

7

www.maysles.org/

9

The widget is duplicated because you’ve added the new script, but haven’t removed the default widget’s installation code:

image
image1918Ă—988 193 KB

To keep only one instance, please remove the default installation code from the page. Try it out and let me know if it helped :slightly_smiling_face:

10

Max,

Good news: The script in your black-background image didn’t exactly match the embed script I have, but I simply removed our Installation ID digits only from the code wrapped near it, and EVERYTHING WORKED!

Calender-view Event Calendar works on desktop and tablet devices;
Open-source date-query applet works;
AND Mobile-Responsive GRID view works on smartphone! (Grid looks better than List so I changed it)

Thank you so much! I hope one day you CAN include a true date-query applet that bundles with this Event Calendar, to avoid customer blunders like mine.

Client has been very happy thanks to you helping me figure things out. :smiley:

Much gratitude for all help.
–Barbara, for maysles.org

• Note: There’s definitely a scrap of code still in there that is probably not best-practices “clean.” Below is a copy of the entire page of embeds on client’s web page right now:

From:

<input type="date" id="range-from" required>

To:

<input type="date" id="range-to" required>

Search

Clear filter

11

I am happy to know everything is working great now!

Regarding the Date filter option, I get your point and this idea is already on the Wishlist. You can upvote it here: Filter by date in month lay out - 1 week displayed

If this request gains more votes, we’ll try to consider it in the future :slightly_smiling_face: