• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WriteNowDesign - Wordpress and Ecommerce Website Design

WordPress, Joomla, Ecommerce Website Design

  • Home
  • Prices/Packages
  • WordPress
  • Services
  • Portfolio
  • Blog
  • About
    • Testimonials
    • Locations
    • Online Payment
  • Contact
  • Show Search
Hide Search

Call 303-907-6133 Email

Add Google Calendar to Joomla or Wordpress

How to Add Google Calendar to WordPress or Joomla

January 2, 2013 by Pat Fortino

Do you need a free, powerful, full-featured, easy-to-use calendar that works in WordPress or Joomla?  Google Calendar is a great solution and you don’t need another extension or plugin to use it.

Click here to watch the video tutorial on adding Google Calendar to Joomla or WordPress

The following tutorial explains how to add a Google Calendar to WordPress or Joomla (or any website).

  1. Go to the following URL to create a Google Calendar account: http://www.google.com/calendar/
    If you already have a Google account (eg, gmail, Google Analytics, Google Docs), you can use it to create a Google Calendar account.
    Important: If you are creating a new Google account, Google will send a verification email. You must verify the email address before you can log in.
  2. Once your account is verified, sign into Google Calendar. Google Calendar will take you through some basic calendar configuration steps; eg, time zone, language, etc.
    Create Google Calendar Screen
  3. Create a new Calendar to share on your Joomla or WordPress website. From the My Calendars list in the left column, select Create New Calendar. Fill in all the settings and make sure you select Make this calendar public and then click Create Calendar.
  4. Click the arrow on My Calendars to view your calendars.
  5. Click on arrow on the calendar you want to share and select Settings.
    Google Calendar Settings
  6. From the Embed This Calendar section, click Customize the color, size, and other options.
    Customize Google Calendar
  7. Customize your calendar; for example, you can show or hide the calendar title, navigation, calendar list, etc. Also, you can specify the calendar width. The width setting is important because the calendar must fit within your page content width. If you are not sure, start out with about 600 pixels wide. You can adjust the width if necessary by repeating this step and changing the width.
    Customize Google Calendar Screen
  8. Copy the calendar embed code and paste it into the Joomla or WordPress page where you can the calendar to appear.
    Note: You must paste the Google Calendar embed code into the HTML of the page; if you paste the embed code into the visual editor it won’t work..
  9. To paste the embed code WordPress 3.5, click the Text tab of the editor and paste the calendar code there.
  10. In Joomla, click the HTML button on the editor ribbon at the top of the editor and then paste the Google Calendar embed code there.
    Note: If Joomla strips out the iframe code, you need to adjust the filtering for your user type. For example, if you are a Joomla Super User, you need to turn off filtering for the Super User. To turn off Text Filtering for a Joomla user, from the Joomla Admin menu select Site > Global Configuration > Text Filters. For Joomla Super Users select No Filtering from the Filter Type list.
    WARNING: Using the No Filtering setting can be a security risk because it allows you to paste javascript code into HTML. Use this setting only for Super Users or Admin users.
    Joomla Text Filters Screen
  11. View your calendar page.
    google-calendar
  12. You can adjust the calendar colors by adding css rules to your stylesheet.

Comments are closed. If you have information to share, contact me here.

Previous Post: « Review Theme My Login for WordPress
Next Post: Video Tutorial How to Add Google Calendar to WordPress or Joomla »

Related

Primary Sidebar

Blog Categories

Call Today

Get a Free Quote

303-907-6133

Subscribe to News

News about WordPress, WooCommerce, & Technology

What’s New

  • WPForms Not Sending Notifications
  • Add Terms and Conditions WooCommerce
  • Fix WordPress AMP Validation Errors
  • Use the Classic Editor with Gutenberg Block Editor
  • Add a Message at Top or Bottom of WooCommerce Checkout Page
  • How to Link to a PDF in WordPress

Find Us On…

  • Facebook
  • LinkedIn
  • RSS

Call 303-907-6133 Email

© 2004–2023 · WriteNowDesign · Sitemap · Log in · Return to Top

 

Loading Comments...