Embed Google Calendar On Your Site Quickly And Easily

[@TheRobtheman]

A couple years late to the party, but a guide to styling this with CSS would be amazing!

[@HamaQalby]

Hey! Is it possible to add events directly to an embedded Google Calendar? For example, I'd like to be able to click on a date in an embedded calendar and be able to add an event directly, just like if i'm in calendar.google.com itself.

[@patriciavarney4543]

Thanks! Easy to follow steps. Really helped me.

[@caticapponi3141]

Thank you for the tuto... I am in for a custom css one for the google calendar because it really looks awful ;) thank you and blessings

[@wplearninglab]

Thanks for the vote for CSS Cati and thanks for watching!

[@jesseastep8262]

Thanks! This was driving me crazy because my events weren't showing up. Super helpful.

[@wplearninglab]

Awesome, I'm glad I could help. Thanks for watching!

[@itmall8325]

Do you have this updated dealing with API? Also removing the bottom right + google calendar button? Thanks Bjorn

[@Rabatata_Extreme]

Quick and well explained. Thanks.

[@adventure-007]

Hi there! Thank you for this video. Yes! Please do a video while styling the Google Calendar with CSS.

[@wplearninglab]

Hi Balla, I looked into making the CSS video and it turns that at the time Google blocked external CSS styles from being applied to its embedded calendars. Google has changed some things in regards to it's calendar embeds, so I'll look into it again.

[@teocerda5367]

You are doing a great job with yours videos!!!

[@wplearninglab]

Thanks Teofilo! And thanks for watching!

[@bluepawn]

Thanks ! that helps a lot !!! wonderful video.

[@JodyHeath]

On smart phone, the calendars look pretty good, except the Event name get's cut off unless you turn the phone in landscape. Any ideas?

[@chc2650]

Thank you exactly what I was looking for

[@wplearninglab]

Awesome, I'm glad I could help, thanks for watching!

[@osamabdulrasol]

Great video, Thanks. is it possible to make video about css cutumizing colors for google calendar?

[@TammyloveEnterprises]

Hi, Can I embed my google calendar for clients and customers to create appointments with me and just show my open slots but not show the entire world what / who my appointments are with... just what time slots are open. Like a Calendly would do?

[@iboughtarv6570]

is there a way to use this with Elementor? Or does in need to be embeded only on the WP editor? Thanks! Super helpful

[@wplearninglab]

I haven't tried, but you can add an html widget to Elementor pages. You should be able to paste the embed code into one of those. I hope that helps and thanks for watching!

[@iboughtarv6570]

I found out how! I typed in html in Elementor and then just added the html line. Thanks!

[@wplearninglab]

Good work, I'm glad you got it working :)

[@AJJmusician]

If I set my calendar for the public to view, can they also edit/delete my entries?

[@RNDespoir]

When i see it on my phone, the agenda is too small. I tried to change it in css but didn't work

[@richudo5999]

Excellent video! Thank you very much!

[@wplearninglab]

You're welcome RiChudo, thanks for watching!

[@VikasYadav-fe8bw]

Hello! I want to use google calendar on wordpress website where users can book their appointment. Is there a way to do that?

[@AndyDOHD1]

Hi Bjorn, just wondered whether you had advice/recommendations on plugins to use for adding Google Calendars to a WP site?

[@wplearninglab]

Hi Andy, For a basic calendar, the Google Calendar embed works very well. For a more advanced calendar that syncs with a booking app and automatically blocks time as "busy" on your embedded Google Calendar then I would go with Acuity or Book Like A Boss (I've used both of those) or any number of the other scheduling apps. AppSumo has a lifetime deal for scheduling apps quite often (I believe there is one on there right now). Let me know if that answers your question or if I misunderstood what you're asking.

[@AndyDOHD1]

@@wplearninglab Hi Bjorn, I actually used SimpleCalendar plugin... which was working well yesterday but overnight something has gone awry and it no longer allows navigation to other months. It seems someone else had the same issue on a FB forum I am on. I simply used an in the html widget in Elementor Pro today but the basic calendar is so darn ugly. I'll have a look at Google Calendar Embed as you recommend it.

[@mumrawat]

can we set google meet as well on our website?

[@georgesmith9611]

Can you show how to use you websites theme colors via CSS into the calendar wordpress page?

[@wplearninglab]

+George Smith Yep, sure can. I'll make a tutorial about it. Thanks for watching George!

[@vladmanolescu7617]

Did you make one? I really want to change that default lightblue from google

[@loveostlund7735]

Hi, is the calendar static or does it update as i put in new stuff in my calandar?

[@KristinGasser]

Thank you so much! This is really helpful... but there´s one question left: the calendar isn´t responsive! Everything works fine on the computer, but on the mobile I can only see two days of the week. Is there an option to play with?

[@wplearninglab]

Hi Kristen. Tanks for reaching out. I did take a quick look around and came across this example that lays out responsively on every device. codepen.io/profstein/pen/ozrbPJ Hopefully that helps. If you haven't joined our Facebook Group why not pop on over where a collective of WP enthusiasts await your arrival facebook.com/groups/wplearninglab/ regards Nickie

[@costa2k1]

Is there a way that other people can add events?

[@nantulyamicheal2985]

hey it looks like you did this video sometime back and google has kept on updating i mean after tapping the setting i was not getting the same page as you so i was like do another updated video thanks

[@wplearninglab]

Hi Nantulya, I look into creating an update video for this. Thanks for letting me know!

[@joecarolynowen8617]

@@wplearninglab Yes, this tuto was helpful but the menu commands have mostly changed or moved.

[@wplearninglab]

Thanks Joe, I have an update video on my recording list.

[@sergiopinna3818]

I have a multilingual site, does this plugin support multilingual sites?

[@susansechrist1905]

How do we prevent people from adding to or revising events on the calendar if we make it public?

[@wplearninglab]

Hi Susan, I did a little research and it looks like once the Calendar is public you can't make it "read only". Seems like pretty basic functionality to have, but Google Calendars can't :(

[@jameschute9374]

This istill works great on desktop but Is there a way to make google calendar mobile browser friendly.

[@planetbounce5724]

where's the css vid for google calendar... great video

[@wplearninglab]

I haven't had many requests for it, but I'll put it on the list.

[@Kevinpdoheny]

You. Are. Awesome!!!!!!!!!!!!

[@wplearninglab]

Thanks, you're awesome too!

[@SpectralightPhoto]

Nice tutorial. Do you prefer this method over the Google Calendar Events plugin? Why or why not?

[@wplearninglab]

Whenever possible I try to stay away from plugins. Plugins can slow down your site and sometimes cause security problems, especially if you don't update them whenever an update is available. There are times when a plugin has so many features that it doesn't make sense to code it all yourself and that's when I go with the plugin. I hope that helps and thanks for watching!

[@SpectralightPhoto]

Thank you for your insight.

[@wplearninglab]

No problem :)

[@Ibiscyclist]

Great video! If you're embedding a calendar for a client, would you use their google account information?

[@wplearninglab]

Hi Peter, yes, I would use their account info. That way when you hand the project over it's all theirs if that makes sense.

[@learningthroughtheatre]

How do you get a search within calendar function working on google calendar within WP?

[@kielypatrick]

I have an set on day mode, but it default to having the current time at the bottom of the window? Can you change this?

[@wplearninglab]

Hi Patrick, I think it's possible, but it's not an easy fix. You can't apply CSS (like CSS display:none) to make the time disappear because you can't apply CSS to iFrames that pull in content from a different domain. There may be some tricky stuff you can do that. Check out this help thread: stackoverflow.com/questions/217776/how-to-apply-css-to- Ideally, you would find a setting inside Google calendar, but I don't think there is one for this.

[@iHelperRo]

Is there a way to manipulate calendar events from my web app backend?

[@wplearninglab]

Hi Idorasi, yep, using the Google Calendar API you should be able to build an integration. Lots of apps do it already. I don't have a tutorial for that yet though.

[@iHelperRo]

Google Calendar Api requires oauth2 authentification.But I don’t need that because I don’t need users to be logged in to add or remove events.

[@wplearninglab]

In that case Google Calendar may not be the best app to use since it requires Oauth2

[@MediaWic]

needs update as google updated cal page and editor page. another Note there is no way of editing css style every time you refresh the page that has the Iframe the calendar refresh the css to its default.

[@suekutno1801]

I added Google Calendar to my website. When my student clicks on a class the box pulls up with the 'When' and "Description" but on the last line it says 'more details'. How do I get rid of 'more details'? It gives wrong information and I don't need/want it.

[@TheSniffix]

Hey, we are using this on our web for a while. Do you have any tips on how to make it look like the calendar is from this century? Google looks absolutely terrible... Have a great day!

[@TheSniffix]

Or any tips for wordpress plugins that can make it look better? :)

[@boboosterbaan3947]

Can I add and sync this with CF7?

[@wplearninglab]

+Bob Oosterbaan Hi Bob, I don't think CF7 is the best solution to integrate with Google calendar. What are you trying to create?

[@boboosterbaan3947]

Timeblocks for therapy reservations. I know a professional plugin would be better, but this might be a good solution untill that step

[@ColletteGee]

Thank you!

[@wplearninglab]

You’re welcome, thanks for watching!

[@IwanSetiawan-hk2nn]

Is there anyway to make the calendar shared and anybody can add an event?

[@costa2k1]

Need the same here

[@maherahmed1977]

thank you for the video, in the way can the people make an appointment in your website? thank you

[@wplearninglab]

Hi Maher, This plugin is not for creating appointments. You would want to create an booking system for that.

[@st_bakerino]

Do you know how this works with the icloud Calendar? no matter how iÍ change my iFrame it doesn't work.

[@larspranger9482]

now how does one customize this in css?

[@wplearninglab]

Hi Lars, I've been doing some research into that. It turns out Google blocks all external CSS styling applied to calendar, so we can't use CSS. There may be a way to do it using JavaScript or jQuery. I'm still looking into it.

[@viddy228]

I can't get it to show in full size on my website..

[@urbanismoph8943]

does this sync automatically?

[@wplearninglab]

Yes, it should.

[@Lila7495375]

I just wish I could make the blue padded border white. It's so hidious. I'm gonna try use css to change it

[@abhashsingh6293]

after adding to the website, it is not editable.please provide detail so that it is editable by the public.

[@wplearninglab]

Hi Abhash, When configuring the settings on the Google Calendar embed settings you should have the option selecting editable by the public. What are you trying accomplish with your GCal integration?

[@gubere1]

It is nice

[@JacobBrownacro]

Why are you purple?

[@wplearninglab]

Haha, that's the style in Canada these days. Just kidding, it was my old junky camera with poor white balance. I'm not purple anymore :)

[@JacobBrownacro]

You look like Thanos.

[@wplearninglab]

Lol, with less wrinkles I think...

[@louiscordova874]

yes

[@americanlad434]

Quickly and Easily... but looks horrible.