1. Before using the calendar shortcode, the calendar needs to be set to public. If you are the calendar’s owner or have the rights to make modifications, find the calendar under the My calendars list and click the down arrow next to its name. Then click Share this Calendar in the menu that appears to change the calendar’s privacy settings.
If you do not have permission to change the privacy settings, contact the calendar’s owner.
2. To make the calendar public check the top two boxes (Share this calendar with others and Make this calendar public). After doing this, the calendar is publicly available to everyone so ensure that you are changing the sharing settings on the correct calendar.
3. Switch to the Calendar Details tab and scroll down to the Embed This Calendar section. Copy the code from the box that looks like this:
<iframe...rest of code...</iframe>
Example:
<iframe src="https://calendar.google.com/calendar/embed?src=******%40case.edu&ctz=America/New_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
You may need to scroll down the text box to copy all of it. Make sure to copy the entire code or the shortcode will not work. If you want to customize the calendar or add another calendar, click Customize the color, size, and other options and proceed to step 4 and 5, otherwise skip to step 6.
4. On this page, you can use the customization options on the left to change the color, title, labels, size, etc. Once you change an option, the code in the top right will automatically change. When you are happy with your customization choices copy the code for use in the shortcode.
5. If you wish to include events from multiple calendars, scroll down a little further until you see the Calendars to Display label. Check the boxes left of the calendars you want to add to include their events. These events will display with different colors and you can customize what color they are by clicking the drop down arrow and selecting a color from the color palette provided.
6. In the WordPress page where you’d like to display your calendar use the shortcode like this:
[[casembed iframe='paste your code here']]
Example:
[[casembed iframe='<iframe src="https://calendar.google.com/calendar/embed?src=******%40case.edu&ctz=America/New_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>']]
Important: a single quote follows the equals sign, do not use double quotes to enclose the calendar code or the shortcode will not work!
7. Save or preview your page. If the shortcode is working properly, you should see your calendar appear on the frontend page. If not recheck the shortcode to make sure you are using the correct syntax, that you are using single quotes for the <iframe> . . . </iframe>, the calendar is public, and that you copied the right iframe code.
