Skip to main content

Making Google Calendar a responsive embed with Mobile support

Google Calendar is amazing, but the embed code is pretty old.  They haven't updated it in many years.

Since everything is Mobile First today, I needed a way to display better on cell phones.

The following code does the following:

  • Define a Responsive Cal types so that it uses 100% of the frame
  • Define a DeskContent and a PhoneContent sizes (with a width of 768 being the switch point) 
  • Wrap all of it in the Responsive Call Div so it all resizes automatically
  • Display the Month view of the calendar if it's a desktop resolution
  • Display the Agenda view of the calendar if it's a mobile resolution


I've formatted this so that it can be placed inline in your HTML file.

The first Embed should be your calendar code set to the Month view.

The second Embed should be your calendar code set to the Agenda view.

Labels:

Comments

  1. UnknownJanuary 9, 2022 at 1:41 AM

    Works great; thanks for the help!

    ReplyDelete
  2. UnknownApril 13, 2022 at 1:27 AM

    Thank you so much! I was looking everywhere to find the correct code and multipe tries. Worked like a charm. Thank you again so much!

    ReplyDelete
  3. AnonymousJune 27, 2022 at 9:54 PM

    I just used this and it totally worked!! Thank you for taking the time to put this together!!!! Easy to work out.

    ReplyDelete
  4. AnonymousJuly 13, 2022 at 1:31 PM

    Awesome! This is just what I needed. Thank you!

    ReplyDelete
  5. AnonymousJuly 20, 2022 at 10:12 PM

    Have you figured out how it works for someone not logged into a google account? This code worked beautifully for me to integrate into our website along with mobile UI, but only if the user is logged into a google account. TIA!

    ReplyDelete
  6. AnonymousAugust 25, 2022 at 1:45 PM

    Thank you so much!! This worked great!

    ReplyDelete
  7. MegAugust 29, 2022 at 11:59 AM

    Thanks so much!!! This was driving me CRAZY! Breathing a sign of relief...

    ReplyDelete
  8. UnknownOctober 18, 2022 at 2:15 PM

    This is exactly what I needed and it works really well - thanks for the easy solution!

    ReplyDelete
  9. AnonymousNovember 10, 2022 at 10:08 AM

    THANK YOU!! Oh my goodness, you just made my day.

    ReplyDelete
  10. AnonymousNovember 29, 2022 at 2:58 PM

    AMAZING!!! Just what I needed!!

    ReplyDelete
  11. AnonymousJanuary 24, 2023 at 12:39 PM

    This is AMAZING... thank you so much for making it available!

    ReplyDelete
  12. AnonymousMarch 10, 2024 at 1:11 AM

    This is still coming in handy 3 years later. Thanks, chief.

    ReplyDelete
  13. AnonymousApril 24, 2024 at 12:08 PM

    Still working! Took me a moment (I have no coding experience) to figure out that the First Embed was in Line 21, and the Second in Line 23 (beginning with the text "<iframe"), in case that's helpful for anyone else. Otherwise, just copy and paste. Thanks! Makes a huge improvement!

    ReplyDelete
  14. AnonymousJune 21, 2024 at 2:12 AM

    AWESOME! Thank you!

    ReplyDelete
  15. AnonymousJuly 12, 2024 at 1:42 PM

    Thank you! Easy to implement and works great

    ReplyDelete

Post a Comment

Most Popular Posts

First Post!

In August 1999, I bought my own domain name, mpking.com .  This domain name. Over the years I've used a variety of blogging software. Initially I did all the website design myself, hand crafting the HTML myself. I even had one of those *Designed by Notepad* buttons. I still have one of the custom drop cap letters I made. Yea, it's really hard to see, because it's White text.  My first website, like most all bad websites of the early 2000, was black theme.  I ran the website off my computer in my room. I quickly tired of this, and moved onto a Blog software platform.  You used an actual program program, (I don't remember it's name) and you would type up your entry, then upload it to the website.  That tired quickly, as the software was at home, and most entries, then as now, revolved around work. Then I discovered FreeGuppy .  It was online CMS platform, and it was nearly perfect, for almost five years.I even developed some pl...
Post a Comment
Read more