Adding a Calendar Feed to a Website

To use a customized calendar feed please follow the steps below. You can download the scripts and modify them yourself or use existing scripts. All content and styles are customizable.

Note: If you decide to download scripts and modify them, please be aware that they are no longer supported by Technology Services.

  1. Create your customized Calendar XML Feed

    You can choose to include On-Going Events that you can either embed in the list of single day events or place them at the end. You can also link to a customize view of the event detail or link to the VCU Events Calendar for the event detail. 

    *NEW IN VERSION 4*

    You can filter your calendar feed to one or more specific RSS keywords. When creating events in the calendar, you can add RSS keywords (for more than one keyword, separate with a comma). You can then create separate feeds for each keyword or you can filter your feeds to only show events matching specific keywords. 

  2. Copy the URL generated (don't worry about the text generated).

  3. Add this URL and the following JavaScript to your page where you want to list all of your events. Make sure you replace the src URL with the URL that you just generated. 
  4.  <script language="javascript" src="https://ts.vcu.edu/cgi-bin/cgiwrap/getcal.pl?Your_Long_Query_String"></script>

  5. If you chose the option (step 1) of a customied view of event details, then you will need to Create the Event Detail Page. (This page will show individual details of events.)  This page needs to be named detail.html and located in the same directory as the list of events. 

  6. Use the following JavaScript if you want to create your own Event Detail page. You do not need to change this script. It will work exactly as it appears here. 

    Place this JavaScript in the section of the detail.html page:

    <script language="javascript">
    var query = window.location.search.substring(1);
    var pair = query.split("=");
    </script>
  7. Place this JavaScript in thesection of the detail.html page where you would like to display the details of the event:

    <script language="javascript">
    document.write("<scr" + "ipt language='JavaScr" + "ipt' type='text\/javascr" + "ipt' src='https://ts.vcu.edu/cgi-bin/cgiwrap/getcaldetail.pl?ID="+pair[1]+"'><\/scr" + "ipt>");
    </script> 

    Use the StyleGuide to format your list of Events and Details Page.

This article was updated: 09/26/2017