YaleSites now allows for an alternative way to showing your Google Calendar. This is the recommended procedure and allows for an easier implementation into your page using Blocks rather than installing a completely separate module. 

Obtain the Google Calendar’s Source Code

1. Open up your Google Calendar. On the left side of the window, under where it says My calendars click on the arrow on the right that corresponds with your calendar.
2. Click on Calendar settings
3. Copy the source code from the Embed this Calendar area.

Add the Source Code to your Drupal page via Blocks

1. Select Structure -> Blocks from the Administrator’s toolbar.
2. Click on the + Add block link above the list of links.
3. Enter the name of the Block in the Block title; this is shown as the title of the block to the user when placed in a Region.
4. Enter a description in the Block description; this is shown on the Administration page to identify the Block.
5. Select the Block body.
6. Click on disable rich-text.                                   
7. Copy the code provided by Google Calendar and paste it into this box.
8. Indicate the pages you want the block to display/not display, Content Types it should be available for, and/or the Roles who should be able to see this block.           
9. Save your new block.

You can import a Google Calendar into your site using Feeds Aggregator. This imports the events in an RSS feed-like format, with very little control over how the events display. 

Enabling Feeds Aggregator

1. Enable the Feeds Aggregator Module.
2. Select Modules, check Aggregator and click Save Configuration.

Creating a Feed

1. Select Configuration > Web Services > Feed Aggregator.
2. Under Feed Overview select Add Feed.
3. Add Feed Title and URL for the feed you are importing (i.e. http://www.google.com/calendar/feeds/……).
4. Select amount of items to import.

Important Note: Remember to click Update Items after creating feed or your feed will remain in 0 items until the next Feeds Pull.

You will now have a block with your issued title that can be assigned to any region within your YaleSite. 

The Agenda module allows you to display a list of upcoming events from Google Calendar as a block on your website. The example below provides instructions for enabling the Agenda Module and how to import your Google Calendar into your YaleSite.

Enabling the Agenda Module

1. Enable the Agenda Module.
2. Select Modules, check Agenda and click Save Configuration.

Creating a Feed

1. Select Configuration > Web Services > Agenda.
2. Select Create a New Block.
3. Edit Fields as follow: [See Screen Capture]
   • Administrative title: Desired title for block.
   • Agenda start: “now” – This will only include events that have not yet started.
   • Agenda end: “+% months” – This will display any events that occur in the next entered months. Replace “%” with desired number.
   • Dates to display: Enter desired number of events to display.
   • Maximum number of events to fetch: Enter desired number of events to import.  
   • Date formatting: Specify the date format.
   • Time formatting: Specify the time format.
   • Text to display if no events are found: Use Default
   • Calendar link text: Use Default
   • Amount of time to cache event data: Use Default
   • Display fields: Comma separated list of fields to display in the event summary.
   • Hide labels: Comma separated list of fields for which the label should not be displayed.
   • Google Calendar IDs: The IDs of each google calendar you want to display.
   • Timezone: The timezone identifier
4. Save Settings.

Assigning Block to Region

1. Go to Structure > Blocks
2. Find block named “Agenda: YourBlockName” and select Configure                                             
3. Assign block to desired region.                                      
4. Specify what page the block should show in.                   
5. Save Configuration.

Applying Style to Block

To attach a style to the Agenda Module you need to create a CSS Injector Rule. If you do not have CSS Injector, see instructions on Enabling CSS Injector.

Apply the Following CSS Rules:Agenda Module CSS Styiling

Note: Copy and paste the code from these files into separate CSS Injector rules. 

Many organizations or departments store and display their events in external calendars such as Google Calendar, but want to display those same events on their YaleSites. To avoid duplicating effort and entering the events in 2 places, you can import the Google Calendar using an iCal feed. 

Necessary Modules

In order to import using iCal, be sure you have the versions of the following Module on your YaleSites. If you have a lower version, please request a Refresh my site and the latest Modules will be updated on your site.

• Feeds 7.x-2.0-alpha8+33-dev (or higher)
• Feeds Admin UI 7.x-2.0-alpha8+33-dev (or higher)
• Date iCal 7.x-3.1 (or higher)

Creating the Feed Importer

The feed importer indicates the type of feed you are creating and allows you to map the fields from the importer (Date, Location, Description, etc.) to the fields in the Event Content Type.

1. Enable the Feeds Admin UI Module (the Feeds Module and Date iCal are enabled as part of your YaleSite).
2. Select Structure > Feeds importer > Add importer. The following dialog displays:
   
3. Give the importer a Name and Description and click Create.
4. Click on Settings where you will enter the Basic Setting. Attach to Content Type: Use standalone form and turn Periodic Import to Off. Click image to enlarge; most should remain the same:
    
5. Be sure to Save.
6. Click on Change next to Fetcher and click on the HTTP Fetcher radio button to match the image below and click Save (click image to enlarge).  
   
7. Click on Change next to Parser and select iCal parser. Click Save (click image to enlarge).
   
8. Click on Change next to Processor. Be sure the Node Processor is selected (this is the default).
9. Click on Settings next to Node Processor.
10. Select Event as the Bundle, Filtered HTML as the format.
    
11. Map the fields as demonstrated in the image below. Remember, the fields being imported are limited to the fields that are coming in from the iCal feed. 
    

If you are using the YaleSites Calendar feature, site visitors might want to add your events to the calendar on their phone, google calendar etc.  As the site administrator you might want to import your events from another calendar such as a Google Calendar. In order for this functionality to be available as part of your Calendar Feature, you must create an iCal (or iCalendar) feed and attach it to your calendar or the individual events on your calendar.

iCal is an Internet file format that allows you to do just that, share events on your calendar between various calendar products used by your site visitors. There are 2 main ways you might want to share information on YaleSites Calendar:

• Importing events into the calendar from other calendars - Google Calendar, etc.
• Exporting events from your calendar to other calendars on various devices – phone, tablet, etc.

This tutorial will provide you with instructions for adding the iCal feed to your calendar or individual event so site visitors can import your events to their calendars, and importing events from external calendars, in this case a Google Calendar.

Important Note: if you are importing your events from the Yale Institutional Calendar (Bedeworks) you can use the pre-built feature. Instructions can be found here. 

Enable Necessary Modules

The first step is to enable the necessary Modules.

• YaleSites Calendar Feature – by default this is already setup.
• Date iCal

Creating an iCal Feed for Your Calendar

Create a Custom Display Setting on the Events Content Type

All Content Types allow you to create custom displays so you can show/hide and arrange fields for the unique requirements of that display. Once you have enabled the Date iCal module, a Custom Display for iCal is available.

1. Structure > Content Types > Event > Manage Display
2. Scroll down to the gray Vertical Tabs
3. Click on iCal
   
4. Scroll back up to the top, still in Manage Display tab and you will now see an iCal button.
   
5. Click on it and arrange the fields you want to display in the top section and in the order you would like them.
   

Create the Feed Display in the Calendar View

1. Click on the Calendar link in your Main Menu to view the YaleSites Calendar Feature.
2. Hover over the right corner of the page to expose the gear icon. Click on edit View.
3. Click on the +Add button in the display listings and select Feed. A new Feed Tab displays in the listing.
   
4. Click on the link Format: RSS Feed and change to iCal Feed, then click Apply.
   
   
5. Add the Calendar name to the settings.
6. Click on Content and choose iCal Fields, then apply.
   
7. Map the field names in the following way:
   • Date Field = Event type Start Date
   • Summary field = Body
   • Location field = Location
   • Click on Apply
8. Scroll down to Filter Criteria​ and set the to include Content: Type = Event
9. In the Feed Settings section (middle pane), set the path to ‘calendar/%/export.ics’, including a  /%/ for the Contextual Filter.
   
10. Click on the link next to Attach and select the display(s) you want to attach the standard iCal feed icon to.
    
11. Make sure the Pager options are set to ”Display all items”.