# Resizing Mobile Google Calendar embedded on wix site??

**URL:** <https://forum.wixstudio.com/t/resizing-mobile-google-calendar-embedded-on-wix-site/18906>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [September 26, 2019, 11:38pm UTC](https://forum.wixstudio.com/t/resizing-mobile-google-calendar-embedded-on-wix-site/18906 "2019-09-26T23:38:30Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![mctranberg](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/mctranberg/32/9941_2.png) [@mctranberg](https://forum.wixstudio.com/u/mctranberg)\
**Post date:** [September 26, 2019, 11:38pm UTC](https://forum.wixstudio.com/t/resizing-mobile-google-calendar-embedded-on-wix-site/18906/1 "2019-09-26T23:38:30Z")

</div>

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.

 ![](https://us1.discourse-cdn.com/wix/original/3X/b/8/b8b87c79addfaae83e25eb50988820f4148caafc.jpeg)

This is how I want it to be presented:

 ![](https://us1.discourse-cdn.com/wix/original/3X/8/0/807f5008cde22dc972d7fe8a262e74a23b29093d.jpeg)

---

<div class="post-metadata">

**Author:** ![mctranberg](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/mctranberg/32/9941_2.png) [@mctranberg](https://forum.wixstudio.com/u/mctranberg)\
**Post date:** [September 26, 2019, 11:39pm UTC](https://forum.wixstudio.com/t/resizing-mobile-google-calendar-embedded-on-wix-site/18906/2 "2019-09-26T23:39:21Z")

</div>

Please help me!

---

<div class="post-metadata">

**Author:** ![givemeawhisky](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/givemeawhisky/32/5383_2.png) [@givemeawhisky](https://forum.wixstudio.com/u/givemeawhisky)\
**Post date:** [September 26, 2019, 11:48pm UTC](https://forum.wixstudio.com/t/resizing-mobile-google-calendar-embedded-on-wix-site/18906/3 "2019-09-26T23:48:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![givemeawhisky](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/givemeawhisky/32/5383_2.png) [@givemeawhisky](https://forum.wixstudio.com/u/givemeawhisky)\
**Post date:** [September 26, 2019, 11:56pm UTC](https://forum.wixstudio.com/t/resizing-mobile-google-calendar-embedded-on-wix-site/18906/4 "2019-09-26T23:56:36Z")

</div>

Or use the app.  
[https://support.wix.com/en/article/adding-and-setting-up-the-google-event-calendar-app](https://support.wix.com/en/article/adding-and-setting-up-the-google-event-calendar-app)

---

<div class="post-metadata">

**Author:** ![mctranberg](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/mctranberg/32/9941_2.png) [@mctranberg](https://forum.wixstudio.com/u/mctranberg)\
**Post date:** [September 26, 2019, 11:58pm UTC](https://forum.wixstudio.com/t/resizing-mobile-google-calendar-embedded-on-wix-site/18906/5 "2019-09-26T23:58:44Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![givemeawhisky](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/givemeawhisky/32/5383_2.png) [@givemeawhisky](https://forum.wixstudio.com/u/givemeawhisky)\
**Post date:** [September 27, 2019, 9:10am UTC](https://forum.wixstudio.com/t/resizing-mobile-google-calendar-embedded-on-wix-site/18906/6 "2019-09-27T09:10:34Z")

</div>

@mctranberg

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](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](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://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-writing-code-that-only-runs-on-mobile-devices)  
[https://support.wix.com/en/article/corvid-tutorial-displaying-elements-in-mobile-only](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.

---

<div class="post-metadata">

**Author:** ![mctranberg](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/mctranberg/32/9941_2.png) [@mctranberg](https://forum.wixstudio.com/u/mctranberg)\
**Post date:** [October 1, 2019, 8:38pm UTC](https://forum.wixstudio.com/t/resizing-mobile-google-calendar-embedded-on-wix-site/18906/7 "2019-10-01T20:38:25Z")

</div>

@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?

---

<div class="post-metadata">

**Author:** ![givemeawhisky](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/givemeawhisky/32/5383_2.png) [@givemeawhisky](https://forum.wixstudio.com/u/givemeawhisky)\
**Post date:** [October 1, 2019, 10:02pm UTC](https://forum.wixstudio.com/t/resizing-mobile-google-calendar-embedded-on-wix-site/18906/8 "2019-10-01T22:02:54Z")

</div>

@mctranberg

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.

```javascript
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

---

<div class="post-metadata">

**Author:** ![mctranberg](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/mctranberg/32/9941_2.png) [@mctranberg](https://forum.wixstudio.com/u/mctranberg)\
**Post date:** [October 7, 2019, 9:58pm UTC](https://forum.wixstudio.com/t/resizing-mobile-google-calendar-embedded-on-wix-site/18906/9 "2019-10-07T21:58:16Z")

</div>

@givemeawhisky is there any way you can make the code or facilitate this for me? It does not make sense to me unfortunately.
