Přihlásit se

Responzivní google kalendář

19. zář 2022 11:08 #146945
Responzivní google kalendář vytvořeno Sylvie
Dobrý den,
prosím pěkně, můžete mi poradit, jak nastavím v článku responzivitu pro Google kalendář? :-) Aby se dal kalendář přečíst i na mobilu.
Tohle je vygenerovaný kód  pro ten kalendář. Stačilo by tam něco dopsat?
<p><iframe src=" calendar.google.com/calendar/embed?heigh...&color=%23F4511E " width="900" height="600" style="border: solid 1px #777;" max-width:="100%""" frameborder="0" scrolling="no">



Odkaz na web:
www.roubenka-javor33.cz/volne-terminy

Zákazník si ve svém Google kalendáři pouze zaškrtne datum pro obsazeno. Víc nepotřebuje. Toto řešení naprosto vyhovuje, až na to zobrazení na mobilu.

Zkoušela jsem hledat nějaký plugin pro responzivní zobrazení iframe, ale nepomohla jsem si.
Moc děkuji.
Sylvie

19. zář 2022 19:06 - 19. zář 2022 19:07 #146946
Odpověď od Linelabcz
Zkuste

<div class="gcalendar"><iframe src=" calendar.google.com/calendar/embed?heigh...&color=%23F4511E " width="900" height="600" style="border: solid 1px #777;" max-width:="100%" frameborder="0" scrolling="no"></iframe></div>

do css
Code:
.gcalendar { position: relative; padding-bottom: 56.25%; height: 0} .gcalendar iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%}


Nezkoušel jsem, ale obecně na iframe např Vimeo funguje.

19. zář 2022 19:49 #146948
Odpověď od Bong
Další možností je použít nějaké rozšíření z JED  Search (joomla.org) . Ale spousta jich dělá jen něco podobného co vám radí příspěvek výše :-)
 

I'm sorry, my responses are limited...you must ask the right questions.

20. zář 2022 02:11 - 20. zář 2022 02:12 #146954
Odpověď od Cony

Nezkoušel jsem, ale obecně na iframe např Vimeo funguje.
To je kvůli zachování poměru stran u videa, to je  pro kalendář spíš nežádoucí. Mělo by stačit to max-width. tzn. 
Code:
<iframe src="..." width="900" height="600" style="border: solid 1px #777; max-width=100%; overflow-y: auto"></iframe>

Jen může dojít k přetečení obsahu na výšku, objevil by se scrollbar. 
Nejrozumnější by asi bylo šáhnout po hotovém řešení, jak píše Bong.

20. zář 2022 10:08 #146956
Odpověď od Sylvie
Moc všem děkuji, vyzkoušela jsem radu od Linelab a zdá se to vyhovující ♥ viz screen...
 
Přílohy:

20. zář 2022 11:42 - 20. zář 2022 11:43 #146959
Odpověď od Linelabcz
Zkuste ještě  upravit výšku divu na
Code:
.gcalendar { position: relative; padding-bottom: 56.25%; min-height: 460px; }

Nejdou při menších rozlišeních vidět všechny dny v měsíci.

Powered by Fórum