How to Add a Google Calendar (Customize and Share with Visitors)

Calendars are an effective way to share upcoming events and news with your customers. We suggest using Google Calendar because it is generally the easiest to use and add to websites.

You can add an interactive version of your calendar to your website, and add buttons for your website visitors to directly save your calendar event.

Embed a calendar on your website

  1. On a computer, open Google Calendar. You can only get the code to embed in your website from a computer, not the mobile app.
  2. In the top right, click Settings > Settings.
  3. Open the Calendars tab.
  4. Click the name of the calendar you want to embed.
  5. In the Embed This Calendar section, copy the iframe code displayed.
  6. Open DoodleKit, navigate to the page you want to put the calendar on.
  7. Click on the Quick Edit Button.
  8. Click on Insert HTML Widget.
  9. Paste HTML Code from Google Calendar and click save when finished.
  10. Click save again to submit changes.

Your embedded calendar will only be visible to people you've shared it with. To allow all visitors to see your calendar, you'll need to make it public.

Customize your embedded calendar

  1. On a computer, open Google Calendar. You can only customize your embedded calendar from a computer, not the mobile app.
  2. In the top right, click Settings > Settings.
  3. Open the Calendars tab.
  4. Click the name of the calendar you want to embed.
  5. In the Embed This Calendar section, click Customize the color, size, and other options.
  6. Choose your options, then copy the HTML code displayed. (Quick Tip: Best Size is 535 pixels Width, 400 pixels Height)
  7. Open DoodleKit, navigate to the page you want to put the calendar on.
  8. Click on the Quick Edit Button.
  9. Click on Insert HTML Widget.
  10. Paste HTML Code from Google Calendar and click save when finished.
  11. Click save again to submit changes.

Note: The Weather Calendar won't show when embedded on your website because this calendar changes for different locations.

Let site visitors save a calendar event

You can add a Google Calendar button to your website so visitors can quickly save your event on their own Google Calendars. To let anyone to save your calendar event, you'll need to make your calendar public.

  1. On a computer, open Google Calendar. You can only make changes to your calendar visibility from a computer, not the mobile app.
  2. Open an event on your public calendar, then find the Visibility section.
  3. Click Publish event.
  4. In the Publish event window, copy the HTML code displayed.
  5. Open DoodleKit, navigate to the page you want to put the calendar on.
  6. Click on the Quick Edit Button.
  7. Click on Insert HTML Widget.
  8. Paste HTML Code from Google Calendar and click save when finished.
  9. Click save again to submit changes.
Have more questions? Submit a request

Comments

Powered by Zendesk