Complexity Level: Advanced

This is an advanced topic. You will need to possess a good understanding of HTML, and have significant experience with Drupal content editing.

Overview

There are several options for using calendars in your Drupal websites. We have a built in calendar for Drupal that is already set up and ready to use, but some departments use third-party options and embed them into their Drupal website for more flexibility.

Built-in Drupal Calendar Option

The built-in Drupal calendar is the simplest option and is populated by creating an Event in Drupal.
Overview of the Event content type
Instructions on How to Create an Event

Third-Party Calendar Options

The third-party calendar options are through Google, Outlook and 25Live calendars. All of these calendars involve embedding external calendars. You can see detailed instructions for embedding these calendars into Drupal:
Embedding External Content into your Drupal Website

NOTE: You can also link to an external calendar: UGA School of Music Performance Calendar. This is fairly straightforward, but involves maintaining a separate site.

Option 1: Google Calendar

Google Calendar embeds are the simplest of the external calendar options. In this example, the department has embedded multiple Google Calendars into a single calendar interface.

Embed a Single Google Calendar

1. Google has documentation on how to embed a single calendar here:
   Add a Google Calendar to your Website

2. You’ll paste the Google calendar embed code into your page using Source view. Click on Source (at the far right of the Edit screen) to show the source code. You may want to refer to these instructions for additional help on embeds:
   Embedding External Content into your Drupal Website
   
   

Embed Multiple Calendars (you have permissions to share all calendars)

If you are the owner or have permissions to share the Google calendars, you can embed multiple calendars by following the steps below. 

Add a Google Calendar to your Website

NOTE: Instead of selecting one calendar, you’ll select all of the calendars you want to embed.

1. After you select the calendars, copy the HTML in the box on the top of the page to insert into your website. You may want to refer to these instructions for embedding the code into your Drupal website:
   Embedding External Content into your Drupal Website
   
   
   NOTE: It will automatically add the code for all of the calendars
   
   

2. You’ll paste the Google calendar embed code into your page using Source view. Click on Source (at the far right of the Edit screen) to show the source code. You may want to refer to these instructions for additional help on embeds:
   Embedding External Content into your Drupal Website
   

Embed Multiple Google Calendars (you don’t have ownership or permissions)

1. To add several Google calendars where you don’t have ownership, you will need to add embed codes from each calendar. You can generate the embed code by following these instructions:
   Add a Google Calendar to your Website
   You may want to refer to these instructions for embedding the code:
   Embedding External Content into your Drupal Website
   
   

2. To add multiple calendars, you will add the embed code from the additional calendars like this:
   Add &src=NEWCODE to the string of the original Google calendar embed code OR
   To add multiple embeds you can add them before or after another &src=ANOTHERSTRING, i.e., before another & code).
   
   Here’s a shortened sample:

   <iframe src="........&src=blah1&src=blah2....." width="250" height="600" frameborder="0">

   
   You will add &src=NEWCODE into this:

   <iframe src="........&src=blah1&src=NEWCODE&src=blah2....." width="250" height="600" frameborder="0">

   Here’s what a sample Google Calendar with multiple calendars embedded will look like:

   <iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=2&bgcolor=%23A79B8E&ctz=America%2FNew_York&src=bWF0aHVnYUBnbWFpbC5jb20&src=NmpsbWw3bmNxMjJwaWdvNzE1dDlsZjZqbmdAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&src=bzVhcmNkY2xvNm43ZW5ncDZyOHEzMTZzaThAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&src=aTFsZXFrcTZyZWV0bmY0cTNrNXNpbmg1ODhAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&src=bHJ0NzludTBoYWNrcmcwMWtsdDJxaW1paTRAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&src=YTlyOWdzcWsyZDVyOXVkcGIxZWNtNnI5aDBAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&src=MW9va2gzanF0bGE0OHJ2NXJlanF0Ym00ZDRAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&src=ZTRvOHBtM3Z0bDAxaXZ2MDI5NTc3ZDVtOGdAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&src=bThta29scm85YmpoczhlMzAwdjdubW50ODRAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&src=b3JzMm91b3Y1ZjM3Z29xcjZyYWkzMmJvczBAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&src=aHNmb3BvdGtmbG4wbjBmbjZicnNsb3QzbzhAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&src=ZG5sYzZ1b25mMzRrdjQ4OG52bjVvbDVxNGdAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&src=dDg2djFnZ2plajVidG1xcDJiOW11MjAzZWtAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&src=c3M0cHM4aDAzdjYyZjF2aHVmNDBjMmo4N29AZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&src=Z2s4a2xmamg3aTlwdGhydjFjcDhjOGJqOGNAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&src=dWdhYW5hbHlzaXNAZ21haWwuY29t&src=dWdhbnVtYmVydGhlb3J5QGdtYWlsLmNvbQ&src=60346d2d711332b09e393b25ed8245684a7b118fbadaee099ee6a723b176020e@group.calendar.google.com&color=%23E67C73&color=%23616161&color=%23EF6C00&color=%23B39DDB&color=%23E67C73&color=%23616161&color=%23E4C441&color=%23F09300&color=%23F6BF26&color=%234285F4&color=%23F4511E&color=%239E69AF&color=%23F09300&color=%23D50000&color=%23D50000&color=%23F6BF26&color=%23E67C73&showTitle=0&mode=WEEK" width="250" height="600" frameborder="0">

   Here is a color-coded sample of the code. The red section is the code you will be adding. The ampersands (which get changed into & ) and the src=LONGSTRING strings. You have to insert the new code between the end of a previous src=LONGSTRING and the beginning of an & (with no spaces):
   

Option 2: Outlook Calendar

Here is a sample Outlook Calendar embedded on a Drupal page:

Step 1: View Shared Calendar

In the web client, go to the calendar you want to embed.
Select > View > Calendar Settings > Shared Calendars:

Step 2: Publish a Calendar

1. In the Publish a Calendar section, select which calendar you want to publish (you can only publish one calendar at a time).
   
   Select ‘Permissions’ for which parts of the events you want to be shown:

2. Click on ‘Publish’
The page will expand to include the HTML and ICS links.
You will copy the HTML link.

Step 3: Embed Calendar in your Drupal Page

Login to your Drupal website and open or create the page where you would like to embed your Outlook calendar. You may want to refer to these instructions:
Embedding External Content into your Drupal Website

Once you are in the Edit screen of your Drupal page, click on Source (at the far right of the editing options).

Paste the following HTML code:

<iframe src="REPLACEME" allowfullscreen="" width="600" height="800" frameborder="0"></iframe>

Replace the REPLACEME text in the src attribute with the HTML link you copied. Your embed code will look like:

<iframe src="https://outlook.office365.com/owa/calendar/a1c15545c2e04097994545cfe6964b77@uga.edu/5eb4826c40c24a3bb390f32eca0b7f772175997518007370317/calendar.html" allowfullscreen="" width="600" height="800" frameborder="0"></iframe>

Step 3: Save

Save the page to view the embed.

Option 3: 25Live Calendar

The final option is embedding a 25Live Calendar.
Here is an example.

There are some issues with 25Live embedding:

It currently triggers a popup tab of a Duo authentication window, which can be distracting for users. It also takes some time to get the embed code as it is obtained from outside of Franklin College.

Step 1: Obtain Embed Code

The embed code is currently only generated by Campus Reservations and a request can be made by emailing reserve@uga.edu. It may take some extra time to get the embed code and the Web Services Team is unable to help with this part of the process.
When completed, they will email you an embed code that looks similar to this sample:

<div id="MicrobiochemCal"></div>
<script type="text/javascript">
embedded25.fromConfig.create('uga', '8597AB58-8B5D-48C7-9B0A-E16D85B54521');
</script>

https://25live.collegenet.com/pro/uga/embedded/availability-weekly-mult-loc?compsubject=location&itemTypeId=4&queryId=1305120&embeddedConfigToken=8597AB58-8B5D-48C7-9B0A-E16D85B54521#!/home/search

Step 2: Embed the HTML Code

You may want to refer to these instructions:
Embedding External Content into your Drupal Website

Click on ‘Source’ in your Drupal page
Paste the following HTML code:

<iframe src="REPLACEME" width="800" height="600" frameborder="0"></iframe>

Replace the REPLACEME text in the src attribute with only the https code from the snipped in Step 1 (you’re provided with more information than you need in Step 1).

Please note: Your code will be different from the sample shown here:

https://25live.collegenet.com/pro/uga/embedded/availability-weekly-mult-loc?compsubject=location&itemTypeId=4&queryId=1305120&embeddedConfigToken=8597AB58-8B5D-48C7-9B0A-E16D85B54521#!/home/search

VERY IMPORTANT: Change the /search at the end of that URL to /dash

https://25live.collegenet.com/pro/uga/embedded/availability-weekly-mult-loc?compsubject=location&itemTypeId=4&queryId=1305120&embeddedConfigToken=8597AB58-8B5D-48C7-9B0A-E16D85B54521#!/home/dash

Your final embed code should look like this:

<iframe src="https://25live.collegenet.com/pro/uga/embedded/availability-weekly-mult-loc?compsubject=location&itemTypeId=4&queryId=1415978&embeddedConfigToken=6426E5F7-2E9B-4055-80DB-5A76303934A6#!/home/dash" width="800" height="600" frameborder="0"></iframe>

Step 3: Save

Save the page to view the embed.

Note: The Drupal editor will change the ampersands in the URL ( & ) into html encoded entities ( & ); this is okay. If you need to edit the embed codes, you can leave the & separators.