Is it possible to change CSS from an iframe?

Asked

Viewed 603 times

3

I got the following iframe embedded Google Calendar:

<iframe src="https://calendar.google.com/calendar/embed?showNav=0&amp;showPrint=0&amp;showCalendars=0&amp;showTz=0&amp;height=600&amp;wkst=1&amp;bgcolor=%23ffffff&amp;src=exemplo.com;color=%23182C57&amp;ctz=America%2FSao_Paulo" style="border-width:0;" width="100%" height="600" frameborder="0" scrolling="no"></iframe>

I’m pulling this one iframe of a Google calendar, the question is: I can change the CSS that iframe?

I need to change colors, fonts, etc. I wonder if there is any possibility to do this, or if anyone knows another way to make these edits in Google Calendar.

css google-api google-calendar

  • You want to change the inside of iframe?

  • Dude, by default I can already tell you that you won’t be able to manipulate the "bottom" page, with css or with js or with anything. This is for security reasons we are prevented. But we have already searched the google documentation regarding?

  • @I_like_trains yes...

  • With PHP you can solve this. View this article with your answer https://www.webdesignerdepot.com/2012/04/integrating-google-calendar-with-your-website/

  • @hugocsl already followed the steps of this tutorial, but it seems that it is outdated.

  • Vixi then complicated rss... You can try downloading the files through the Chrome Dev Tools Source tab and call them straight from your local file on the page to see if it works. I never tried it, but it’ll solve...

  • Not right :(

  • Confer http://sugi.github.io/jquery-gcal-flow/

Show 3 more comments

1 answer

1

As far as I know, only having access to the DOM using js ex:

var estilo = document.createElement('link');
estilo.rel = 'stylesheet';
estilo.type = 'text/css';
estilo.href = 'caminho/estilo.css';
seuIframe.getElementsByTagName('head')[0].appendChild(estilo);

Browser other questions tagged css google-api google-calendar

You are not signed in. Login or sign up in order to post.