How to apply css to google calender iframe...?

Question

I want to apply css to google calender iframe.
I had tried with Jquery but it gives JavaScript security error.
However I also tried this link

Got success but many of its links goes to 404 page as it takes my domain as base URL

Answer 1

You cannot apply css to a iFrame ...

An iframe is a 'hole' in your page that displays another web page inside of it. The contents of the iframe is not in any shape or form part of your parent page.

From here

The reason behind that is security. If you have blabla.com in one window and gmail.com in another one, then you’d not want a script from blabla.com to access or modify your mail or run actions in context of gmail on your behalf.

From here

If the iFrame is on the same domain and it doesnt violate the "Same-origin policy", you can work around this situation like this:

$('iframe').load( function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
});

Solution posted here

Anyway, if you are not violating the "Same-orgin policy", you probably don't want to use an iFrame.

Answer 2

You will face a security error when you apply css using javascript to an iframe that contains a page in a different domain. but this problem has a workaround by using document.domain if both documents are on the same top level domain, are using the same protocol & you can add the following line of JavaScript to the page in the iframe:

document.domain = "example.com"; 

the page containing the iframe needs the same line to make the domains match. Once this is in place, the script running on your main page is allowed to access properties of the document in the iframe element –