This tutorial will show you how to configure the Agenda module to display Google Calendar events on your Drupal site. This module reads both private and public calendars and creates any number of blocks that can show events from multiple calendars.

Installation

The first step in setting this thing up is similar to any module: installation like usual. Just copy and extract the module targball in the /sites/all/modules folder and enable it from admin/modules.

Configuration

To configure the module navigate to admin/config/services/agenda and create a new block. You’ll notice an example block already created that illustrates the module at work. OK, so to create the new block, you’ll need to submit the following information (I will only cover the most important):

Administrative title: provide a name for the block so you can recognize it among other blocks.
Agenda start: set the number of days of negative offset for the events to be displayed. Depending on your needs, usually it is a good idea to set it to now so that all the events displayed are in the future.
Agenda end: the timespan to be covered for displaying the events.
Dates to display: the number of days to display at once on the block.
Maximum number of events to fetch: self explanatory.
Time formatting: the php date format to be used for the time.
Amount of time to cache event data: I would leave that to the default number.
Display fields: the Google Calendar feeds to be displayed. The default includes calendar, start time, description but not the link, so you may also want to add that to get a link to the individual event in the Google Calendar.
Google Calendar IDs: probably the most important and tricky (see below).
Timezone: your timezone in the Google Calendar format.

The Google Calendar ID field lets you add multiple calendars to be parsed by the module for this particular block, separated by simple line breaks. Also, it lets you add both private and public calendars. To add a public calendar, navigate to its Calendar Details on google.com and you’ll see the ID listed there like in the image below:

To add a private calendar, go to its details on google.com (like above). There, get the private XML URL of the calendar and copy it into the Google Calendar ID field. It should look something like this:

https://www.google.com/calendar/feeds/name%40googlemail.com/private-d258678ggt8b5cef869aa0c10fc044ad/basic

Turn that into:

name@googlemail.com/private-d258678ggt8b5cef869aa0c10fc044ad 

Make the necessary replacements (such as the google account name, and you’ll have of course another private ID) and then you can save the configuration. Navigate to admin/structure/block and find the newly created Agenda block. Assign it to a region and go test it out. It should now display 4 future dates with events from the Google Calendar(s). If you added multiple calendars, the events will be displayed with different colors (depending in which calendar the events are in). If you click on one of the events, more details about it will slide down using some jQuery.

Appearance

The default appearance of the block already looks pretty nice. But if you are not satisfied with the colors or want to make some other changes, you can easily do them with some CSS. I will show you how to change the colors of the individual calendar events and make them appear with round corners.

First thing you should probably do is investigate the CSS that is already applied to the block by the module. There you will find the right selectors to use as well as it will give you a better idea as to how the block is themed.

To change the color of the calendar events, copy the selector of the calendar you would like this to be changed on (for example: .agenda-block .cal_0) and paste it into your custom CSS file you are using for your Drupal theme. There you change the color to whatever you want. You should probably inspect the element in your browser with firebug or chrome to determine which selector applies to which calendar (to avoid a lot of trial and error).

Now, after some inspection, I realized that the .cal_1, .cal_2 etc. classes are applied to HTML list items, so if you want to apply round corners to all the events, you need to find a class one or two steps higher. Since the ordered list does not have a class applied to it, you can use the one applied to the

.block .agenda-block ol li { 
  -webkit-border-radius: 5px;
  border-radius: 5px;
}