Change to List View already on tablet breakpoint?

The simplest thing to do would probably be to add a filter to the core WordPress function wp_is_mobile() that adds logic to define tablet user agent’s as being mobile.

Doing server-side detection of different environments can be tricky, and My Calendar just uses the internal WordPress logic to check that. You can also use the My Calendar filter mc_is_mobile to customize only how My Calendar uses that function, to prevent other possible side effects from other uses of the core function.

Thanks for the quick reply and the tip! Alright, I’ll try to customise the mc_is_mobile function then to avoid potential side effects ??

• This reply was modified 3 months, 2 weeks ago by marcviladrich.

For anyone stumbling across this issue in the future:

I tried customising the mc_is_mobile function but quickly realised that it’s far too tricky to reliably detect the current browser window width using PHP (would have required a PHP-Javascript custom code solution without 100% accuracy guarantees).

Instead, I ended up using a pure CSS workaround. I found the following media query inside the reset.css file that MyCalendar generates:

/* Base responsive styles. Migrated to main plugin 12/10/2023 */
@media screen and ( max-width: 720px ) {
.mc-main:not(.mini) thead {
border-bottom: none;
}
.mc-main:not(.mini) table.my-calendar-table,
.mc-main:not(.mini) .my-calendar-table thead,
.mc-main:not(.mini) .my-calendar-table tbody,
.mc-main:not(.mini) .my-calendar-table tr,
.mc-main:not(.mini) .my-calendar-table td,
.mc-main:not(.mini) .my-calendar-table caption {
    display: block;
    height: auto;
    min-height: 0;
}

.mc-main:not(.mini) .my-calendar-navigation,
.mc-main:not(.mini) table.my-calendar-table,
.mc-main:not(.mini) .my-calendar-table thead,
.mc-main:not(.mini) .my-calendar-table tbody,
.mc-main:not(.mini) .my-calendar-table caption  {
    margin: .5rem auto;
    padding: 0;
}

.mc-main:not(.mini) .my-calendar-table td {
    margin-bottom: .5em;
    width: auto;
}
.mc-main:not(.mini) .my-calendar-table td.no-events,
.mc-main:not(.mini) .my-calendar-table td.nextmonth {
    display: none;
}

.mc-main:not(.mini) .my-calendar-table td .mc-date span[aria-hidden=true] {
    display: none;
}

.mc-main:not(.mini) .my-calendar-table td .mc-date {
    font-size: var(--grid-date);
    padding: .5em 1em;
}

.mc-main:not(.mini) .my-calendar-table td .button {
    font-size: 1rem;
    padding: .5rem;
}

.mc-main:not(.mini) .my-calendar-table td .mc-date .screen-reader-text {
    display: block;
    clip: auto;
    clip-path: none;
    height: auto;
    margin: 0;
    overflow: auto;
    position: static !important;
    width: auto;
    text-align: left;
}

html[dir=rtl] .mc-main:not(.mini) .my-calendar-table td .mc-date .screen-reader-text {
    text-align: right;
}

.mc-main:not(.mini) .my-calendar-table th {
    display: none;
}
}

This media query defines the calendar’s styles in mobile view (breakpoint 720px). In my case I needed the mobile view to activate much sooner (at 1280px). The workaround was to define a custom CSS file, copy-paste the media query above and replace @media screen and ( max-width: 720px ) with @media screen and ( max-width: 1280px ).

@joedolson would it be possible to streamline this CSS workaround such that us users could simply specify the breakpoint at which we want to switch to mobile directly inside MyCalendar’s settings? This way we wouldn’t need to override the mobile CSS ourselves.

I know from experience that media-query max-widths don’t accept regular CSS variables, but maybe you know a relatively low-effort way to make this work? At least for me, this would be a very nice UX improvement ??

Thanks again for all your work on MyCalendar!
Cheers

Yeah, I really really wish that media query max-widths accepted regular CSS variables. It becomes a lot more complicated without that. I have some ideas, but none of them are just trivial, unfortunately.

One option is that I could have multiple responsive stylesheets at different common breakpoints, and users could select what they want. Currently, I’m thinking that’s the easiest solution.

Thanks for the insight into your ideas!

As an alternative, I was thinking it might be possible to generate the CSS file via PHP somehow? So us users could specify a breakpoint, the specified pixel number would be turned into a PHP variable and then the PHP snippet responsible for generating/enqueueing the reset.css file generates the CSS with the breakpoint value the user specified.

But I don’t have enough insight to know if this a viable option.

Cheers