Need some help with you project? Contact me

How to use the Agenda module to display Google Calendar events on your Drupal site

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.


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.


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 and you’ll see the ID listed there like in the image below:

Google calendar

Image taken from the documentation section of the Agenda module on


To add a private calendar, go to its details on (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:

Turn that into: 

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.


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


div> surrounding it: .agenda-block.

So in your custom CSS file you can add the following command in order to apply round corners of 5px to all events:

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

OK, so there you have it. You added the calendars, you are displaying the events as you want them and you made the block conform to your website’s look and feel.

Hope this helps.

Further information on the topic?


I've followed the instructions but I always get no upcoming events.

When i push the debug button i get this error
Fatal error: Call to undefined function socket_create() in /customers/f/9/5/ on line 487

any ideas.

thanks alot


Hi Danny,

do you know if it is possible to display multiple calendars in one block?
I have a public calendar where multiple organizations share their calendar. And I want to display them all in one block. I don't want to create a block for each organization (because their are 20 of them and some rarely have an event and other have events every week)

Kind Regards,

Add new comment

You can post comments in Markdown and basic HTML tags.
For code blocks, wrap your code within '~~~'. For example:
$var = 'my variable';