Third party calender is not showing correctly in all viewports 
Author: Gerard V.
Visited 1250,
Followers 1,
Shared 0
Goodmorning, i have a supersaas calender for making reservations, i put it in a iframe and all works fine on my destop. But the calender does not get smaller when i make my browser smaller (other viewports). Then the calender is not fitting in the window. See: massageontspanningdeventer.nl/testtest.html
How can i get it to work for all the viewports?
Best regards,
Gerard
Posted on the
(It > En) ... depends on the external page of your calendar ...
... try to extend the row, cell and object to the full width ...
... or use GoogleCalendar, very simple, and which is really elastic in IFRAME...
.
ciao
.
@KolAsim.
Google Calendar... Hum hum are you sure ?
Not anymore responsive...
... check carefully; ... you have to try with the correct options ...
...
.
... check carefully; ... you have to try with the correct options ...
OK. You win one beer ... Cheers
I would suggest the Luxcal-calendar. It is very good in iframes - and for mobiles it has special displays designed for smaller screens. https://www.luxsoft.eu/
More information here : http://calendarforum.dk/
Author
Hello everybody, my calender is a bookings and reservation calender, so i do not need another calender.
My question is: how can i make my calender alright for all the 4 viewports, using an iframe.
Best regards Gerard
... you tried what I said to find out about the result ...?...
ciao
.
Author
Hello KolAsim, thanks for the replay, i have tryed the options, and the calender is responsive .... BUT the layout is to big for the two smallest viewports. Lucky the have also a mobile version, so its getting better.
Is it possible to use a choice in the html code: so that i can use the large calender for the large (desktop) versions and for the smaller viewports the mobile version?
Something like: If viewport >= 720 - large version - Else - mobile version ...
Thanks, Gerard
... yes it is possible with EXTRA code ...
... use two different lines one below the other, and net the two calendars individually for each line ...
... when you have done it you notify me, and then I check the code to be applied ...
ciao
.
Author
Ok, can you give an example of the code? i'm not that well with those codes ;)
I use this some code in this example: https://bramminginfo.dk/bramny03/billeder.html
It is done like this:
In the html-object 1 I have this
<iframe id="album" src="" width="100%" frameborder="0"></iframe>
This is just the iframe
In 2 I have this
<script>
function narrowWin() {
var iFrame = document.getElementById("album");
if (window.innerWidth > 1150) { //large screen
iFrame.style.height = '690px';
} else if (window.innerWidth > 720){ //narrow screen
iFrame.style.height = '500px';
} else if (window.innerWidth > 480){ //narrow screen
iFrame.style.height = '430px';
} else {
iFrame.style.height = '390px';
}
iFrame.src="https://bramminginfo.dk/lokationsbilleder/index.php";
}
</script>
This sets the behaviour for each viewport.
You could eventually move the iframe.src up on each viewport and this way it could be special content for each viewport.
In the expert-tab for the page settings you have this after opening of the body tag
<body onload="narrowWin()" onresize="narrowWin()"></body>
This is just an example how it could be done.
... you have to post the LINK with the changes I mentioned earlier so that I can evaluate ...
... the example code would be this:
<style>
@media (min-width: 720px) {#NameSelector_1 {display: none! important}}
@media (max-width: 719px) {#NameSelector_2 {display: none! important}}
</style>
...! ... or, to simplify and leave things as they are now, post the LINK of the second calendar for "mobile", in place of this, so that I can evaluate:
https://www.supersaas.nl/schedule/Massage/Agenda
...>>> >>> new LINK
.
ciao
.
Author
.. New link for mobile is : https://m.supersaas.com/schedule/massage/agenda
Thnx for the help ;)
... OK ... ( below 720 pixels ) ...
... paste the code into the Properties of that Page, (testtest.html), in this position:
>> Step 3 - Map > The 'Page Properties' window > | Options in the Expert section | ▪Custom Code: > 3^ option > Before closing the HEAD tag
... code:
<script>
nK=1;mK=1;//K;
function risoluzioneK() { //by KolAsim
var wK = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (wK >=720 && nK==1) {
$("iframe").attr("src", "https://www.supersaas.nl/schedule/Massage/Agenda"); nK=0;mK=1;
}else if (wK <719 && mK==1) {
$("iframe").attr("src", "https://m.supersaas.com/schedule/massage/agenda"); nK=1;mK=0;}}
window.onload = function () {risoluzioneK() }
window.onresize = function () {risoluzioneK() }
risoluzioneK();//K;
</script>
.
ciao
.
Author
Good evening KolAsim, thank you very much !! Its working as it should. Only one question, what do i need to put in the cel with the i frame? Now there is
<iframe src="https://www.supersaas.nl/schedule/Massage/Agenda" width="100%" height="1000"> </iframe>
Best regards, Gerard
... it can stay that way; ... when the page opens, the code will automatically activate the correct link for the suitable definition (+/- 720px)...
.
ciao
.
Author
Thank you very much !! ciao