Events Calendar: Configure Website Feed and Calendar Link

Summary

This document describes the process of integrating your Events Calendar items into your Drupal website through the use of RSS feeds and calendar links. Examples shown include using the Panelizer tool (current UNH.edu build), and using a Paragraph (current Colleges & Schools build).

Related Video(s)

Image link to video

Details

In order to complete this tutorial you will need to acquire a calendar link and RSS feed specific to your needs.Calendar links and RSS Feeds are created on request and provided by Web and Mobile Development. To request a link and/or feed, please use this link to the Web and Mobile Development work request form.

Please note: If an RSS feed has already been created for you it will be displayed on the Events Calendar RSS Feed list. Here you can right-click on the matching feed link and copy the link address.

Also note: Calendar links are not displayed in this way, and are only available upon completion of your calendar link request to Web and Mobile Development.

Adding link and feed to website - UNH.edu build

In this section we will detail how to add the calendar link and RSS feed to a website home page using the Panelizer utility.

Please note: The Panelizer Utility is only available in the current Drupal 7 unh.edu build.

  1. Navigate to your site home page and click on the "Customize this page" button located in the lower section of your browser screen.
  2. Scroll to the section where you want your calendar feed to display and add a new Panel Pane.
  3. From the List of choices click on "Feeds," then on "Display Feed"
  4. Copy and paste your RSS Feed link into the "Feed URL" field
  5. Choose the number of events to display. We recommend 3 to 5 events depending on how many events are available at any given time, and whether events are displayed vertically or horizontally.
  6. Copy and paste your calendar link into the "More Items URL" field
  7. Modify the "More Items Text." We recommend simply using "View Calendar" as the text here.
  8. Select your desired Alignment from the dropdown list, then click on FINISH.
  9. If necessary, drag and drop the new Panel Pane into your desired position.
  10. Be sure to save your changes!

The RSS Feed will pull event headers onto your home page, and the calendar link will take your visitors to the UNH Events Calendar where only YOUR events will be displayed.
 

Adding link and feed to website - Schools & Colleges build

We will now demonstrate a similar process for the Drupal Schools & Colleges build:

  1. Navigate to your site home page and click on the Edit tab
  2. Your calendar feed and link are managed in a Paragraph. For this example we will assume a Paragraph has already been created for this purpose.
  3. Scroll down the Edit page to the list of Paragraphs near the bottom, identify the Paragraph you will be working with, and click on the Edit button.
  4. Please note: If you are adding a new Paragraph for this purpose, choose the paragraph type Feeds: RSS List.
  5. Beginning on the "Edit Content" tab, fill in the Title field. We recommend using "Upcoming Events" as the text for this field.
  6. Next, copy and paste your RSS feed URL into the space provided.
  7. Next, choose the number of item to display. As mentioned previously, we recommend 3 to 5 events depending on how many events are available at any given time, and whether events are displayed vertically or horizontally.
  8. In the "No Results Text" field, you may leave the default text or modify as desired.
  9. Next, the "More Items URL" section is where your calendar link will be configured. Type in your link title in the "Title" field, copy and paste your calendar link into the URL field, then choose "Open URL in a New Window."
  10. Next, choose how the event date should be displayed. You may experiment with this setting, but we recommend choosing the "Media (bootstrap media layout)" setting from the dropdown list.
  11. After editing these content settings, click on the "Styles" tab and note the settings here. Select the "RSS List Direction" you prefer, and set the heading style to "Caret - Centered, Dark Orange".

Upon completion of these steps, scroll down to the bottom of the Edit page and click on the Save button. The end result should be a display where your calendars items appear as configured, along with a calendar link that opens a new window and takes you to a page showing your events in the UNH Events calendar.

 


Want to learn more?

Additional help on this and other related topics is available during a regularly scheduled Drupal/myPages/Website Tools - Walk-in/Zoom-in Session. More information, including a complete schedule, is available at https://at-training.unh.edu/apps/ssr?action=course&id=288.

Details

Article ID: 644
Created
Fri 7/19/19 5:30 PM
Modified
Fri 2/7/20 2:29 PM