I need my Google calendar to be presented with the entire month visible on my mobile site. How do I resize it to make it this way? Right now it only allows users to scroll through.
I know this is possible because it was layed out with an entire monthly view on a mobile site that was created with another provider.
This picture is what it looks like right now.
This is how I want it to be presented:
Please help me!
How have you added it to your page, through simple html iframe? If so, then just resize it so that it is big enough to show the whole content.
Or use the app.
https://support.wix.com/en/article/adding-and-setting-up-the-google-event-calendar-app
@givemeawhisky the app only lets you view it through agenda style. And the html iframe is how I added it, and it is sized only to where it shows the whole content, but still makes you scroll on the mobile version.
Firstly the app will optimise it for you on mobile view, however like you say you are limited to your choice and you can see that here and vote for change too.
Currently, the mobile optimized Google Calendar is only available in the Agenda format with a 24 hour clock. It is not possible to choose a different format or to display the time using a 12 hour clock with AM or PM.
https://support.wix.com/en/article/request-changing-the-format-of-the-google-event-calendar-on-your-mobile-site
Secondly, as you are using a Google Calendar which is setup as a widget, then that is where you run into issues with Wix.
Important Note: Wix does not support script code, so it is not possible to use our Widget Creator code, but it is possible to embed calendar using their “Embed a Site” element, although there are some limitations; the site will display identical calendar like on your Google Calendar, with the same view, menu, filters, events, layout, header, footer, etc. So you can not use all the possibilities as with the widget code, but you can use all the calendar options and in this way to set and adjust the calendar.
You can have a read of this post here about how to resize it to fit your device etc.
https://www.lifewire.com/embed-google-calendar-website-or-blog-1616957
If you want to have the html iframe displayed at different sizes on your desktop and your mobile devices, then you can set it up so the mobile iframe is only shown on mobile devices like this.
https://www.wix.com/corvid/reference/wix-window.html#formFactor
https://support.wix.com/en/article/corvid-writing-code-that-only-runs-on-mobile-devices
https://support.wix.com/en/article/corvid-tutorial-displaying-elements-in-mobile-only
As for the link that you showed for the Google calendar through thedooband website, then bear in mind that the website was done in WP and they will have their own way of working with widgets, plus that one always opens up on agenda first too when you go to view it.
@givemeawhisky I am having trouble following this coding process in trying to get the full calendar on my mobile device. The three last links you sent aren’t making sense to me. Is there any way you can help me easier understand this?
Basically, you need to make up two separate displays, so one calendar for the desktop version and one calendar for the mobile version.
As the code says, the mobile version only elements must be set to hidden on load in the desktop editor and then you can use those elements in your code.
This works perfectly, however it only works on published site.
import wixWindow from 'wix-window';
$w.onReady(function () {
if(wixWindow.formFactor === "Mobile"){
$w("#mobileonlyelement").show();
}
});
//This will show the 'mobileonlyelement' on mobile devices only, on desktop devices it will be hidden on load.//
IT DOES NOT SHOW CORRECTLY ON PREVIEW.
ADD TO SITE TAB SO IT WORKS ACROSS SITE AND NOT JUST PAGE ONLY
@givemeawhisky is there any way you can make the code or facilitate this for me? It does not make sense to me unfortunately.