Adding a google calendar to a page


I am looking for a way to add an active google calendar to prototype. I want to put it in so when I export everything for a developer it is already in there for him to build.

Any ideas?


In order to achieve that you will need to work with Axure Cloud.
One the page of your project, add a dynamic panel that you will name “test-Iframe” for the purpose of this exercise. Size it to be 800px x 500px. Once you are done, upload the project to Cloud.
Using the Axure Cloud app or the web app, go to your project and add a plugin, give it a name, select “Inside Specific Dynamic Panel”. Enter the name of the targeted dynamic panel “test-iframe”. The priority is not relevant for now as you may have only one plugin.
In the plugin code iframe below, insert your calendar code. You can use this for the purpose.
Click the button “Add Plugin”. you will be prompt to target the desired page. Transfer the page over to the right to “Add the plugin to”.
After that you MUST view the page rendered from the cloud. This will not render from your local machine.

Hope this helps.

The plugin window

Showing with the edited plugin.

The Include on page modal.

The final outcome.


Wow. This is very helpful. Will this code be in the html when I export?


It should be present. However, I would recommend making an annotation for the developer with the iframe code so they can grab it without searching. Please keep in mind that they are unlike able to grab the entire HTML code of the page as a copy and paste. They will need to do their work. :slight_smile:


Why not use an inline frame?


You could use the iframe widget as well, depending on what is the final objective. It works too. I am use to do it the way mentioned above when I use external code ( and with code restrictions), or when the use of animated SVG is needed. I think it becomes a matter of preference. However, it is the only way I was able to interact with a SVG.


hola me puede ayudar con el tema


me puede ayudar con el tema lo necesito


While you cannot directly embed a Google Calendar into a prototype, you can create an iframe element in your prototype and point it to the public URL of your Google Calendar. This will allow users to view the calendar within the prototype, but they will not be able to interact with it or make any changes.


Can anyone answer my question What limitations exist when integrating a Google Calendar into a prototype using an iframe element? :slightly_smiling_face:


Integrating Google Calendar into a prototype using an iframe has limitations like limited customization, restricted control over navigation and interactivity, security concerns, challenges with mobile responsiveness, potential performance impact, and dependency on Google’s service availability.