I'm working on a site that needs a basic calendar, and thought of adding in Google Calendar. The thing is that I would really like to style the whole embedded calendar, but it's in an iframe and even adding !important to the targeted classes does not work.
Is there any way of adding some css to that iframe? Through some JavaScript or something?
Thanks!
You are not going to be able to do any styling on the iFrame, if you do you'll get the cross-domain origin error. Essentially, you are locked out of tampering with an iframe for security reasons. You should look into pulling the feed/json of the google calendar and creating the entire view yourself.
The settings offered by Google are only basic, however, and so for it to fit the unique style of your site, you’ll want a bit of extra editing power. Unfortunately adding CSS rules to the parent document doesn’t work, even when adding an !important directive to each rule.
https://www.webdesignerdepot.com/2012/04/integrating-google-calendar-with-your-website/
Because of the same-origin policy, it isn't possible to inject CSS into an iframe.
However, these days there are a number of third party apps that make it easy to style and embed Google calendars.
Here is a short list of options:
Styled Calendar
Tockify
ChronoFlo Calendar
Or, if you'd rather use something open source, FullCalendar is a great solution. Here is some documentation on how to use their Google Calendar plugin: https://fullcalendar.io/docs/google-calendar
*Full disclosure, I'm a member of the Styled Calendar team
Related
I have a new Google sites and already use Google analytics with it but I also would like to use Google Tag Manager. Any one know a way to make that work?
Not really. You could technically add an "Embed" element to the site and add your GTM snippet there. But you can really only trigger tags when the embedded element loads similar to a page view. I believe these elements are similar to iFrames so I don't think you could get any data from the parent URL either.
Otherwise, you can still add Google Analytics by going to "Settings".
After all day following the google rabbit hole, I’m still wondering about google/bing/etc being able to crawl svelte apps. I want to convert my personal portfolio to svelte, which will be a SPA. If I add tags for the header data on the svelte SPA, will google pick it up, or do I need ssr for google to see the rendered page?
Google crawlers will most likely run your JavaScript so that the title etc. inside <svelte:head> is picked up, but Bing and others will not.
If you go with Sapper you can use sapper export on your site to get a pre-rendered html/svelte hybrid which will solve your issue.
Be aware of using svelte:headfor your base meta stuff. Things like open graph images or twitter cards will not work this way! This is just useful if you need to inject something to the head on mount, but not safe if you have to deal with SEO.
I'm looking at implementing Google Analytics and was wondering:
Can the tracking code be put in an external file, with the rest of my js then minified? If not, can the js be minified to one line then used on my page?
Or does the code have to go in my ? In some examples I've seen it after the body tag at the bottom of the page, why is this?
yes you can put it in your external .js file.
No It doesn't matter really where in the page you place it. Some people put it in the Head tag others in the footer. Personally I place it in the head tag that way I can add event tracking and custom dimensions though out the page as its built. But its really personal preference where you place it.
I would like to add a page(a market watch ticker) from other website which is given by client using iframe. but its color not matching my website. how to match it. is there any way to match it??please help?
You can get the iFrame to inherit the parents CSS and javascript see this question:
Iframe inherit from parent
But you need access to the iFrame markup to do this, otherwise I believe it is not possible (and probably shouldn't be for other reasons like security etc.)
I need to add some css styling to the comments widget in a facebook application. I use the following code snippet to use the widget
" num_posts="10" width="500" scrolling="yes">
I need to provide a way for users to scroll to view more comments than fits in the initial container size.
Is there a way to do it at all?
Thanks
I'm afraid this isn't possible using the comments social plugin. Social Plugins load as iframes within your page, and there isn't a hook to allow this kind of behaviour.
If I've understood correctly what you're asking for isn't a CSS change, it's a behavioural change that would require JS to lazy load new comments.
You'll have to roll your own, using the Graph API to fetch the comments as you need them