UNH 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).

• Adding link and feed to the website - UNH.edu build
• Adding link and feed to the website - Schools & Colleges build

Related Video(s)

How-To

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 the 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.

Instructions

Step 1 - Navigate to your site home page and click on the "Customize this page" button located in the lower section of your browser screen.

Step 1 - Scroll to the section where you want your calendar feed to display and add a new Panel Pane.

Step 2 - From the List of choices click on "Feeds," then on "Display Feed"

Step 3 - Copy and paste your RSS Feed link into the "Feed URL" field

Step 4 - 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.

Step 5 - Copy and paste your calendar link into the "More Items URL" field

Step 6 - Modify the "More Items Text." We recommend simply using "View Calendar" as the text here.

Step 7 - Select your desired Alignment from the dropdown list, then click on FINISH.

Step 8 - If necessary, drag and drop the new Panel Pane into your desired position.

Step 9 - 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.
 

Outcome

You have successfully added links and feeds to the UNH.edu build

Back to top

Adding link and feed to the website - Schools & Colleges build

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

Instructions

Step 1 - Navigate to your site home page and click on the Edit tab

Step 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.

Step 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.

Please note: If you are adding a new Paragraph for this purpose, choose the paragraph type Feeds: RSS List.

Step 4 - Beginning on the "Edit Content" tab, fill in the Title field. We recommend using "Upcoming Events" as the text for this field.

Step 5 - Next, copy and paste your RSS feed URL into the space provided.

Step 6 - Next, choose the number of items 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.

Step 7 - In the "No Results Text" field, you may leave the default text or modify as desired.

Step 8 - 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"

Step 9 - 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.

Step 10 - 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.

Outcome

You have successfully added links and feeds to the Schools & Colleges build

Back to top

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 Drupal/Sites@USNH/Website Tools - Virtual Walk-in Session.

Need additional help?

If you have any additional questions, please fill out the Website, Mobile, & SharePoint Development & Design Support Form.