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