mobile responsive

Which view are you using (month, week, list)? I assume you are using month, the default view. Normally month view collapses to a list for easier reading on mobile devices, but you can turn that off with nomobile="true" in your shortcode. This also works in week view. Note the “nomobile” versions have a minimum table width and horizontal scrolling, which is done to keep the table cells from getting too narrow to hold text.

There are a lot of other customization options… check the documentation for the full list:

https://icscalendar.com/icsdocs/

Hi Room34, thanks for the swift response.

My short code is [ics_calendar url=”https://mijn.24x7email.nl/home/[email protected]/website.ics” view=”week”]

If i select this is see the complete week. If i look at this page on my phone (android with google browser) i only see the day where tere are appionments instead of the complete week.

How can i show the complete week on a mobile device? The nomobile option shows the week horozizontal (like on the desktop) but not “per day”to scroll…

There is not currently an option to display the calendar the way you’re describing. The default collapsing to a list of only the days containing events has seemed to be the most commonly preferred method of re-rendering the calendar for mobile.

You can get the regular collapsed list view to show empty dates with this bit of CSS, which can go into your theme or into Appearance > Customize > Additional CSS:

@media screen and (max-width: 782px) {
.ics-calendar:not(.nomobile) .ics-calendar-month-grid .empty { display: block !important; }
}

You might not need the !important but I would probably use it.

Just a warning though… since the cells do not have a defined height in the list view, when a date doesn’t have any events it’s just listed as a heading and then immediately followed by a heading for the next date. That’s why I ended up hiding them altogether; it just looks kind of weird. But if you have a lot of dates with no events, then this view may not be ideal. You might want to consider using list view instead —?it shows a fixed number of upcoming events, rather than a fixed date range.

Thanks for your help! Why i ask for this is to be able tp show customers which timeslots are available to book (instead of which are already taken) Different approach ??

That makes sense. You may also want to have a look at the additional view options available in the Pro version. Some of those are better suited to availability/scheduling calendars than the views in the free version. That said, I’ll also encourage you to take a look again at all of the options available in the free version, as there’s a lot you can customize. I can also offer some CSS tips for optimizing the presentation for your needs.

Hi Room34, i did some testing but i cannot find the code i need to display a list or a vertical view (on a mobile device) of a workweek (mo – fri) days with all hours between 08:00 hrs and 17:00 hrs..

I hope you have some pointers?

TIA!

What you’re describing is available with the “Full” view in ICS Calendar Pro. There is not an equivalent option in the free version.

please check your info email account.