Přihlásit se

Joomla 5.2.2 Security & Bugfix Release

Joomla 5.2.2 je nyní k dispozici. Jedná se o bezpečnostní vydání pro Joomla 5.x.

Responzivní google kalendář

19. zář 2022 11:08 #146945
Responzivní google kalendář od Sylvie
Nováček
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
Admin
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.
Linelab.cz - Tvorba a správa webových stránek.
Linelabox - Vytvořte si Joomla! šablony zdarma.
Poděkovali: Sylvie

19. zář 2022 19:49 #146948
Odpověď od Bong
Moderátor
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.
Poděkovali: Sylvie

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

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.
Poděkovali: Sylvie

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

20. zář 2022 11:42 - 20. zář 2022 11:43 #146959
Odpověď od Linelabcz
Admin
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.
Linelab.cz - Tvorba a správa webových stránek.
Linelabox - Vytvořte si Joomla! šablony zdarma.

Powered by Fórum

Novinky z diskuze Nejnovější příspěvky