Knowledge Base

Events Calendar Installation Guide

Last Modified:
30 Jun 2020
User Level:
Administrator +

The Events Calendar Module is an application that lists and displays calendar events from Terminalfour, Google calendar, or iCal (feed or file). Features include event listings, categories, search, recurring events, and multi-day events.

You can see an example of the Events Calendar on the Terminalfour Sample Site.

A zip of the required application files is available here.
(Community Site log-in required)

Installation steps

This article deals with v2.3 of the Events Calendar.
Check out the Release Notes to see what's changed.

Let's get started with the installation. The following instructions are broken up into these steps:

  1. Overview
  2. Setting up event sources
    • this will guide you through setting up the calendar events that you can use with the Events Calendar Module
    • if you're using a Terminalfour Events Content Type as the source, you can check that you've carried out the steps correctly with a verification check at the end
  3. Configuring the Event Calendar Module
  4. Displaying the Event Calendar
    • now it's configured, set up the Events Calendar Module to display the events
    • when you've followed along with this step you can verify it's working
  5. Finishing up
    • set up the JS for the ajax functionality, add the content in the sidebar and the canonical links
  6. Final Verification

Overview

Architecture

How all the assets you'll create fit together is best explained with this diagram:

Events Calendar Module Architecture Diagram

Event sources

The Events Calendar Module can display calendar events in the following formats:

  • Terminalfour Content Items
    • if events are added as Content Items in Terminalfour they can be published as a JSON file which is used by the Events Calendar as a source of data.
  • Google Calendar
    • for events that originate in Google Calendar, the Events Calendar Module is provided with the credentials for that calendar in order to retrieve and display the events.
  • iCal URL
    • if events are available in an iCal feed, the Events Calendar Module is provided with the URL to the feed to retrieve and display the events.
  • iCal File
    • if the events are contained in an iCal file, the file is uploaded to the Media Library and referenced by the Events Calendar Module to display the events from that file.

PHP

The PHAR file, a PHP Main Library archive, and the list of views are managed within the Media Library.

Server Requirements

The Events Calendar requires PHP 5.5, 5.6, 7.0, 7.1 or 7.2+ to be installed on the webserver that will host the site, and on the staging server (if this is a separate server). The following extensions should also be enabled:

To prevent users from viewing or downloading the PHAR file via the browser, add the following lines to the httpd.conf file or wherever your server configuration is handled. 

Order allow,deny 
Deny from all

Required Content Types

The Event Calendar Module uses three Content Types:

  1. Event
    • add an event to the calendar
  2. Events Calendar Configuration
    • identify the main settings of the events calendar
    • one Content Item using this Content Type for each calendar
  3. Events Calendar Views
    • displays a view of the calendar
    • multiple Content Items using this Content Type for each calendar

Content Types for Main Calendar Page 

The main calendar page is made up of the following Content Items, using these different Content Types:

  1. Event Calendar View (c)
    • Content Layout: text/canonical
      • placed in the header of the Page Layout
      • shows the canonical, prev and next link
      • generates download.php
  2. Event Calendar Configuration (b)
    • Content Layout: text/html
      • generates config.php and event-calendar.json
  3. Event Calendar View x 2 (c)
    • Content Layouts: text/html or text/sidebar
      • used to display a single view

Screenshot of Events Calendar with highlighted Content Types

Content Types for Event Details pages

You can also link from an event listing to an event details page using fulltext. To do this, add the code to the text/fulltext Content Layout of the Event Content Type, and include the Events Calendar View content to pass the Event Calendar settings. 

  1. Event Calendar View (c)
    • Content Layout: text/html
  2. Events (a)
    • Content Layout: text/fulltext
      • the fulltext page contains the code that is used in Events Calendar View to display the dates correctly

Screenshot of the Events Calendar fulltext page with Content Types highlighted


Setting up the event sources

A calendar needs events so let's start by setting up the event sources. The Events Calendar Module supports events as Terminalfour Content Items and iCal and Google Calendar Events.  Once we have a source ready we'll tackle the module installation itself, starting with its configuration and then the design.

Event source types

1. Terminalfour Events

The Event Calendar can handle Terminalfour Events, using a specific Content Type to provide the events displayed in the module.

In the following installation guide, we are going to create an Event Content Type from scratch but if you already have an Event Content Type, you can update the Content Elements as below to preserve functionality.

Set up the following assets:

File Extensions: PHP

To display the event calendar, your Channel or Microsite must publish PHP files. Therefore if you haven't already, set up PHP as a file extension and enable the extension on your Channel.

List: Event Category

This is used by the Event Content Type and it will contain all of your main event category types, examples are shown below, though anything may be used:

NameValueSelectedSublist
... ...   ...
Category 1 Category 1   Events Subcategory (optional)
Each category can have an associated Sublist.
List: Recurs Every

This is used by the Event Content Type and it will contain some or all of the following values:

NameValueSelectedSublist
Daily 1 day    
Weekly 1 week    
Every 2 weeks  2 weeks    
Monthly 1 month    
Every 2 months 2 months    
Every weekday 1 weekday    
Every Wednesday next Wednesday    
First Monday of each month first Monday    
Never Never Yes  
Ad-Hoc Ad-Hoc    

Never and Ad-hoc are required values; all other values are optional.

Single events that recur on multiple days in recurring intervals are not supported (e.g. an event that takes place each Monday, Wednesday, Friday). To do this, you will need to create three different events with three different recursive intervals.

List: Yes

This is a List with a single list entry named "Yes". This is used by the Event Content Type to configure whether an Event is an all-day event or not. An existing (matching) list can be re-used if preferred.

NameValueSelectedSublist
Yes Yes    

Content Type: Event

Create an "Event" Content Type using the following General options (anything not mentioned may be left at default):

NameDescription
Event Use this to add an event to an Events Calendar

 

NameDescriptionTypeMax SizeUse as filenameRequired

Title

Enter the Title for the Event.
This will be used to search for events 
Plain Text 200   Yes
Category Select Categories from the List. 
This element will be used to show the Category facet in the search
Multi-select List (Event Category List) Default   Yes
Start Date and Time Select the Start date & time for the Event.
Used to determine the first start date and time for the single event. If it is a recurring event it will use as the first recurring date
Date Default   Yes
End Date and Time Select the End date & time for the Event. 
Used to determine the first end date and time for the single event. If it is a recurring event it will use as the first recurring date
Date Default   Yes
All Day Event? Check if this is an all-day event.
This option will define if the Event is a full-day event, and in this way will ignore the time defined in Start Date and Time and End Date and Time
CheckBox (Yes List) Default    
Recurs Every Select recurring state from the list. 
It needs to be always selected and it should be Never by default. If Ad-hoc please provide the specific dates in Ad-hoc Recurrence Events 1/2/3.

Select Box (Recurs Every List)

Default

  Yes

Recurrence End Date

Enter when the recurring finishes.
Allowed when "Recurs Every" is different from Never.  Specifies the final date of the final recurrence date of the event.

Date

Default

   

Ad-hoc Recurrence 1

Select custom recurring date only if the "Recurs Every" element is selected "Ad-hoc"

Date

Default

   

Ad-hoc Recurrence 2

Select custom recurring date only if the "Recurs Every" element is selected "Ad-hoc"

Date

Default

   

Ad-hoc Recurrence 3

Select custom recurring date only if the "Recurs Every" element is selected "Ad-hoc"

Date

Default

   

Brief Description

Enter a small description used to display in the full list and when it searches for Event.

Plain Text

1000

   

Main Text

Enter long description used in the Fulltext page as the main description in the Event.

HTML

10000

  Yes

Venue

Enter the location for the Event.
This is an optional element visible in the Fulltext.

Plain Text

200

   
Location Latitude Enter the coordinate for the map. 
This is an optional element visible in the Fulltext.
Plain Text 80    
Location Longitude Enter the coordinate for the map. 
This is an optional element visible in the Fulltext.
Plain Text 80    
Image Enter the image of the Event. 
This is an optional element visible in the Fulltext.
Media n/a    

Content Layouts

Name text/calendar-json
File extension (Default)
Syntax Type Java
Content Layout Processor JavaScript Content
Content Layout Code

 In "Events Calendar.zip", you'll find the code in "content-types/events/calendar-json.java"

The code inside calendar-json.java can be customized. While you should avoid deleting elements, you can add as many as necessary. 

 

Name Default Channel layout e.g. (text/html)
File extension (Default)
Syntax Type HTML/XML
Content Layout Processor T4 Standard Content
Content Layout Code
 <!--<t4 type="content" name="Name" output="fulltext" use-element="true" filename-element="Title" modifiers="striptags,htmlentities" />-->

 

Name Default Channel layout e.g. (text/html)
File extension PHP
Syntax Type PHP
Content Layout Processor T4 Standard Content
Content Layout Code

In "Events Calendar.zip", you can find sample code inside "content-types/events/fulltext.php". 

The code provided is just an example so you can customize it for your needs.

Events Section  

Once the Event Content Type is created, add a Section for your events' content. This may be anywhere in your Site Structure but is most commonly below the Calendar Section that will contain the Event Calendar Module.
Create an "Events" Section as follows:

Screenshot of Events Section in Site Structure

This Section will contain all your Event Content Items

Name Events
Show in navigation No
Page Layout Inherited, or select the Page Layout created for the calendar page

Enable the following Content Types (either on the Branch or the Section, depending on your requirements):

Content TypeGroupBranchSectionDisabled
Event   No [X] Yes No

Event Contents

Once the "Events" Section is created add some content to test the functionality. Test functionality should include examples of events in the past, and some in the future for testing purpose.

Navigation Object: Events Calendar: get JSON version from Event - Past Events

When Content Items are added that use the Event Content Type, we will need a Navigation Object to output the JSON version of those events just created using the Top Content Navigation Object.

Set up options are in the table below. Unlisted options should be left at their default values:

Name

Events Calendar: get JSON version from Event - Past Events

Fetch Method Use Branch
Select Section Select your Events Section in the Site Structure.
Content Type Names The Calendar Event Content Type from above or All Content Types if there is more than one
Channel Select the Channel/s where the Event Calendar is/are publishing.
Content dates Use current content
Date element Start Date and Time
Ignore date ordering Return content in the order Terminalfour displays it [x] : check this option to ensure that ALL content displays, not just future/past content.
Number of pieces of content to display 99999
Which piece of content to start at? 0
Content Layouts? Use alternate content layout [x]: check this option
Alternate Content Layout text/calendar-json
Before HTML  
After HTML  

 

Copy the T4 tag. You're going to need it later.

Navigation Object: Events Calendar: get JSON version from Event - Upcoming Events

This uses the Top Content Navigation Object.  Set it up using the options in the table below. Unlisted options should be left at their default values.

Name

Events Calendar: get JSON version from Event - Upcoming Events

Fetch Method Use Branch
Select Section Select your Events Section in the Site Structure.
Content Type Names The Calendar Event Content Type from above or All Content Types if there is more than one
Channel Select the Channel/s where the Event Calendar is/are publishing.
Content dates Use upcoming or future content
Date element Start Date and Time
Ignore date ordering Return content in the order Terminalfour displays it [x] : check this option to ensure that ALL content displays, not just future/past content.
Number of pieces of content to display 99999
Which piece of content to start at? 0
Content Layouts? Use alternate content layout [x]: check this option
Alternate Content Layout text/calendar-json
Before HTML  
After HTML  

 

Copy the T4 tag. You're going to need it later.

Verifying the Event Content Type

So far, we've created an Event Content Type with two Navigation Objects that output the JSON file with all event Content Items. 

This is a good point to test what we've done so far. To verify the steps above in a hidden Section, or in the Event Section just created, add the following code in a Code Content Type:

{"events": {"event": [<t4 type="navigation" name="Events Calendar: get JSON version from Event - Past Events" id="x" /><t4 type="navigation" name="Events Calendar: get JSON version from Event - Upcoming Events" id="x" />]}} 

If a Code Content Type can't be added, you can add the above to a Page Layout. Be careful to use a Page Layout that won't affect live pages on your site.

If the Event Content Type is working, a Section that contains the above code will output something like the following:

{
"events": {
"event": [{
"recurs": "1 Week",
"content_id": "4147",
"imagePath": "",
"recursend": "31/07/18 13:12",
"startdate": "02/07/16 18:00",
"ad_hoc_dates": [],
"url": "/alumni/dummy-events/dummy-calendar-event-19.php",
"enddate": "02/07/16 20:00",
"main_desc": "<p>This is the main text for Dummy Calendar Event 19<\/p>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, laboriosam modi nostrum ipsam excepturi quae soluta aliquid impedit atque obcaecati!<\/p>\n<p>Quibusdam placeat delectus magnam quam expedita, corporis excepturi esse culpa, odio autem alias, mollitia eaque voluptas id accusantium incidunt deleniti!<\/p>\n<p>Aliquam nihil magni quibusdam voluptatibus dolorum dolore corporis ipsa, impedit hic, deleniti eligendi est laboriosam illo qui fuga beatae eos.<\/p>\n<p>Ipsam dolorem quasi sunt ullam consectetur veritatis tempora perferendis laborum deserunt quis velit ipsum, excepturi perspiciatis sapiente quaerat consequuntur quibusdam.<\/p>",
"name": "Dummy Calendar Event 19",
"all_day": "",
"location": "Dummy Event Plaza",
"categories": "Student Events",
"short_desc": "This is a dummy description. Ad earum necessitatibus itaque, architecto consequatur expedita aliquid reprehenderit mollitia."
}, {
"recurs": "Never",
"content_id": "4031",
"imagePath": "",
"recursend": "01/06/20 23:59",
"startdate": "15/05/17 14:00",
"ad_hoc_dates": [],
"url": "/alumni/dummy-events/dummy-calendar-event-190.php",
"enddate": "15/05/17 15:00",
"main_desc": "<p>This is the main text for Dummy Calendar Event 190<\/p> \n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium porro quae veniam possimus, ipsa aliquid, consequatur commodi quisquam provident et.<\/p> \n<p>Dolorem est repellat officiis, voluptatum, atque vel amet veniam optio, eaque itaque tempore iure? Consequatur sequi saepe, deleniti nostrum quasi.<\/p> \n<p>Facere et reiciendis nam quisquam, blanditiis cupiditate! Architecto at maxime, possimus eligendi quas sapiente. Quia alias facilis dignissimos maxime vitae?<\/p> \n<p>Nam possimus velit, quaerat esse nihil, architecto officiis aperiam laborum. Commodi optio iste sint id laborum, voluptatibus officiis ex earum.<\/p>",
"name": "Dummy Calendar Event 190",
"all_day": "",
"location": "Dummy Event Plaza",
"categories": "Uni Events",
"short_desc": "This is a dummy description. Facere ut, magnam distinctio soluta similique doloribus necessitatibus iste accusantium."
}, ]
}
}

Before continuing the installation ensure that:

  1. all Event Content Items are present in the JSON File, for both past events, and future events (check that both Navigation Objects are displaying correctly)
  2. all nodes contain the following attribute: content_id, startdate, enddate, all_day, recurs, recursend, ad_hoc_dates, shor_desc, main_desc, categories, url.

If it's not working re-check the above steps to identify the problem. 

If you see no output from the Navigation Object and it looks right, check the Programmable Layout.

Once you've verified the JSON is outputting correctly, delete the code Content Item or remove the code from the Page Layout. This was added only for testing purposes. When we create the Event Calendar Configuration Content Type we will place the piece of code in the Event Calendar Configuration Content Type. 

2. Google Calendar Events

The following steps are used only if the Event Calendar displayed Event using a Google Calendar.

The Event Calendar can only use one Google Account. To set Google Calendar API and get Google API Token and Google Calendar IDs follow these instructions.

Ensure to have the following information:

  • Google Email: Google API Account Email
  • Google API Token: Google API JSON Token File.
  • Google Calendar IDs: Multiple Google Calendar IDs they should look like:

xxxxxxxxxxxxxxxxxxx@group.calendar.google.com

The API Token is a JSON file that contains the credential to access the Google Calendar account, so you should put this file in a safe location that only you can access, i.e., not in the Media Library. 

3. iCal Events

The following steps are used only if the Event Calendar displayed iCal Events.

If the iCal source is a URL, ensure you have a list of the URLs that are publicly accessible from your live website.

If the iCal source is a local file, add it to the Media Library in any Media Category.

To output the path for the Events Calendar Module you'll need to set up the following Media Type:

Media Type: Cal File

Not required if you have an external iCal URL.

Create an iCal Media Type and associate the "path/*" Content Layout with it:

Screenshot of a iCal Media File with associated Content Layout

Media File: iCal

Not required if you have an external iCal URL.

If you intend to use the iCal source, you must load your .ics file here. This file can be added to any Media Category. Select iCal as the Media Type. Note where it's located in the Media Library.


Configuring the Event Calendar Module

Once you've set up the calendar sources, the next step is to display them.

The Event Calendar module uses two different Content Types – one that's used to display the single part, called views, and one that it is used to define the basic configuration that the views will use.

Configuration Content Type

In this part we are going to set up the Configuration Content Type, will all necessary settings and assets in order to make it work.

File Extensions: PHP

You can skip this step if you've already done this.

In order to display the Events Calendar, your Channel or Microsite must publish PHP files. If you haven't already, enable the extension.

Media Layout: path/*

The Event Calendar Module must output the file path to files like the PHAR File (PHP Archive). To do this, create a Media Layout for the Media Content Type.

Go to Assets > Content Types and search for the Media System Content Type. If it does not already exist, add a Content Layout named "path/*". In the Content Layout code field add the following:

<t4 type="content" name="Media" output="file" /> 

Media Type: PHAR File

Create a Media Type to upload the PHAR file to the Media Library.

Create a PHAR Media Type and associate the "path/*" Content Layout with it:

Screenshot of a PHAR Media File with an associated Content Layout

PHAR File

The Event Calendar uses a PHP library in the PHAR file. The PHAR file contains all the PHP code necessary to make the Event Calendar work.

Upload the "events-calendar-source.phar" file to the "Events Calendar" Category and select PHAR as the Media Type:

Screenshot of the Events Calendar PHAR file uploaded to the Media Library

List: Events Calendar Sources

After setting up the Channel for the Event Calendar Configuration, we'll create the List and then the Content Type.

This List is the source List for the Events Calendar Configuration Content Type:

NameValueSelectedSublist
T4 Events TerminalFourEvents    
Google Calendar Events GoogleCalendarEvents    
iCal Events IcalEvents     

 Content Type: Events Calendar Configuration

NameDescription
Events Calendar Configuration The Content Type used to configure the Events Calendar

The Main View Section element refers to the Section where the Main View of Events Calendar Views is located. (see Views to understand which type of view is the Main View).

The Main View Section is where a Search will change the results (in a General Page or a Month View) and where the events links in a Mini Calendar is displayed.

CheckBox(Events Calendar Sources)

NameDescriptionTypeMax sizeUse as filenameRequired
Events JSON or XML Source The Navigation Object that returns the URL of the JSON or XML events source file (the one created with text/calendar-json) Plain Text 200    
Google API Token For Google Calendar Events - Google API JSON Token file Plain Text 256    
Google Calendar IDs For Google Calendar Events - Calendar IDs (Multiple file spit by |, to specify the Category: Category 1=Calendar ID 1|Category 2=Calendar ID 2) Plain Text 5000    
Google Email For Google Calendar Email - Google API Account Email Plain Text 256    
iCal Sources For iCal Events - iCal .ics source file or iCal URLs (Multiple file split by new line) Plain Text 5000    
Main View Section This variable set where the single link inside the view needs to redirect. Section/Content Link Default    
Max Events per Page Max element in a page Whole Number 10   Yes
Options Optional Settings Plain Text 5000    
PHAR File Link to the PHAR File Media Default   Yes
Sources Multi Check to choose which Source load Check Box (Events Calendar Sources) Default   Yes
Timezone Timezone (if it's not set, it is Europe/Dublin - see this guide to timezones for the available ones) Plain Text 80    

Content Layouts

Name text/html (must match the Type set on the Channel)
File extension PHP (.php)
Syntax type PHP
Content Layout Code In "Events Calendar.zip", use the code in "content-types/php-events-calendar-configuration/html.php"  

  

This Content Layout contains two Navigation Objects. We'll modify these later.

Name text/config
File extension PHP (.php)
Syntax type PHP 
Content Layout Code In "Events Calendar.zip",use the code in "content-types/php-events-calendar-configuration/config.php"  

 

Name text/json-ptof
File extension Default
Syntax type HTML/XML
Content Layout code 

Use the code that we used to verify that the JSON file was installed correctly

 

{"events": {"event": [<t4 type="navigation" name="Events Calendar: get JSON version from Event - Past Events" id="x" /><t4 type="navigation" name="Events Calendar: get JSON version from Event - Upcoming Events" id="x" />]}}  

Navigation Object: Events Calendar: create event-calendar.json

In this step, we'll update the above Content Layout with the correct Navigation Objects.

The first one is the Navigation Object responsible to generate the JSON File that displays Terminalfour Events called "event-calendar.json"

This Navigation Object will be created only if Terminalfour Events are used, otherwise it's optional.

Generate File Navigation Object is used to create the file to display the Events Calendar: get JSON version from Event content.

Name Events Calendar: create event-calendar.json
File name event-calendar
File extension json
Output directory Use the current directory
Content Layout text/json-ptof

 

Go to Events Calendar Configuration > text/html layout and change the ID in the T4 Tag to be the ID for this Navigation Object.

Navigation Object: Events Calendar: create config.php

The Event Calendar Configuration generates a "config.php" file that is called in each Event Calendar View and defines the settings in the Content Type.

Generate File Navigation Object is used to create the file that has the Event Calendar Configuration script

Name Events Calendar: create config.php
File name config
File extension php
Output directory Use the current directory
Content Layout text/config

 

Go to Events Calendar Configuration > text/html layout and change the ID in the T4 Tag to the ID for this Navigation Object.

Navigation Object: Current Section Path

This retrieves the current Section path to specify where the JSON file is located.

If it doesn't already exist, create a Section Details Navigation Object to get the current Section path (used to get the full event-calendar.json path).

Name Current Section Path
Details method Current Section
Output detail Section path


Make a note of the T4 tag for this Navigation Object. It will be placed in the "Events JSON or XML Source" element of the Events Calendar Configuration Content Type when creating a Content Item using this Content Type (e.g. event-calendar.json)

Site Structure: Calendar Section

After creating the Content Type we'll add the single Sections.

Create a Section in the Site Structure that will contain the Calendar. This Section outputs the general List to show all searched events or just a monthly view. Depending on how your page is configured to retrieve page elements, e.g., the sidebar, it may require additional Sub-Sections to be created.

Screenshot of Calendar Section

 

Name Calendar
Show in navigation  [X] Yes (it can be no as well)
Page Layout Inherited, or select the Page Layout created for the calendar page 

Enable the following Content Types (either on the Branch or the Section, depending on your requirements):

Content TypeGroupBranchSectionDisabled
Events Calendar Views   [X] Yes No No
Events Calendar Configuration   No [X] Yes No


Site Structure: Content Items

Add Content Items to configure the calendar:

Content Type Events Calendar Configuration
Name Calendar Configuration
PHAR File Select the PHAR file in the Media Library
Events JSON or XML Source Update the T4 Tag in the following code with the ID of the Current Section Path Navigation Object 

 

<t4 type="navigation" name="Current Section Path" id="x" />event-calendar.json
Max Events per Page: The number of events to list per page (e.g. 10)
Main View Section A link to the Calendar Section (current Section, in this case)
Google Email If you are displaying events from a Google Calendar, enter the Google API Account Email
Google API Token If displaying events from a Google Calendar, enter the absolute path to the Google API JSON Token File. Refer to separate documentation on Google Calendar Events.
Google Calendar IDs

Multiple Google Calendar IDs, split by | to specify categories:

Title Calendar 1=xxxxxxxxxxxxxxxxxxx@group.calendar.google.com|Title Calendar 2=xxxxxxxxxxxxxxxxxxx@group.calendar.google.com
iCal Sources

You can add more than one iCal Source and add each to a new line. The title specified is read-only if the iCal does not have its own. iCal Sources can be Media Files or URLs.

Title Calendar 1=<t4 type="media" id="*Add iCal File ID HERE*" formatter="path/*" />
Title Calendar 2=<t4 type="media" id="*Add iCal File ID 2 HERE*" formatter="path/*" />
Title Calendar 3=http://icalurl.com/index.ics|https://icalurl.com/index2.ics

The Events Calendar accepts http:// and https:// protocols, not webcal://. Check if the webcal:// protocol can be replaced by http:// or https://
Options

See Events Calendar Options for more information

Verifying the steps so far

Publish the Calendar Section you've just created to verify that:

  1. The Section is published as a PHP file
  2. The Section contains a config.php file that it is blank
  3. The Section contains an "event-calendar.json" that contains the JSON file created for the Events (This is only if Terminalfour Events were created)
  4. In the Media Library, ensure the PHAR File is correctly published

If one of the above items is missing go back and check the steps so far


Displaying the Event Calendar

After creating the Event Calendar Configuration, we will need to create the Content Type that displays the module called Event Calendar View.

Media Type: PHP File

The Event Calendar uses the PHP file that contains the view. These files are added to the Media Library. First, check that you have a Media Type PHP.

Go to System Administration > System Settings > Media Library and, in the Media Types tab, add the following Media Type a Media Path.

Create a PHP Media Type and associate the "path/*" Content Layout with it: 

Configure the Media Publish on the Channel

Once the Media Type is created, we have to ensure that the Channel always will publish the file by going to System administration > Setup sites & Channels > Channels,  edit the Channel settings and go to Publish Options: 

Screenshot of Enable Publish Outputs in Channels setings

Views Files

In the unzipped "Events Calendar.zip," the "Media Library" directory contains the following files that will be uploaded to the Media Library.

The "views.zip" file is not a Terminalfour Package so you must create one with it. To do this go to Content > Content Migration > Packages, select Create New Package and then select Media Archive. Select PHP as the Media Type and Import:

Animated GIF showing PHP files being added as a Media Package

 

List: Events Calendar View Positions

This List is used by the Events Calendar Views Content Type and defines where the view will appear in the Page Layout. In the sample site, the General View uses the default Content Layout (text/html) and the calendar in the sidebar uses another (text/sidebar).

Your List name and values should refer to the Content Layouts included on your page.

The default value is the main Channel Content Layout (e.g. text/html).

NameValueSelectedSublist
Default text/html Yes   
Sidebar text/sidebar    

List: Events Calendar Views

This List is used by the Events Calendar Views Content Type and is a List of the required modules for the Events Calendar. The list values should contain all the Views/Modules names without the "blade.php" suffix.

Screengrab of List Values for PHP Events Calendar Views

NameValueSelectedSublist
Calendar Switches Calendar-Switches    
Event Fulltext Settings Results-Single    
General Page (Heading + List) Results-Page Yes  
Go To Dropdown Search-GoToDropdown    
Headings Results-Headings    
Large Calendar View Calendar-Page    
List Results-OnlyList    
Mini Calendar Calendar-Mini    
Results Canonical Results-Canonical    
Search > Categories Search-RadioCategories    
Search > General Field Search-GenericField    
Search > General Field + Categories Search-GenericFieldandRadioCategories    

Content Type: Events Calendar Views

NameDescription
Events Calendar Views  Events Calendar Views to show only the modules you need

See Views to understand the View Content Type.

NameDescriptionTypeMax sizeUse as filenameRequired
Events Calendar Config Link Events Calendar Section Link Section/Content Link Default   Yes
View View that you want to see Select Box (Events Calendar Views) Default   Yes
Position in the page Select where the view will appear in the Page Layout Select Box (Events Calendar View Positions) Default   Yes
Main View Section Use when you load the module in a different page Section/Content Link Default    
Options Optional Settings Plain text 5000    

Content Layouts

Name text/canonical
File extension PHP (.php)
Syntax type PHP
Content Layout code In "Events Calendar.zip", use the code in "content-types/php-events-calendar-view/canonical.php"

 

Name text/download
File extension PHP (.php)
Syntax type  PHP
Content Layout code In "Events Calendar.zip", use the code in "content-types/php-events-calendar-view/download.php"  

 

Name text/html (must match the Type set on the Channel)
File extension PHP (.php)
Syntax type PHP
Content Layout code

In "Events Calendar.zip", use the code in "content-types/php-events-calendar-view/html.php"

Make sure the following variable is updated to reflect the current Content Layout name (so replace 'text/html' with the name of the current Content Layout):
$current_content_layout_name = 'text/html';

You can add any additional Content Layouts that are listed in the Events Calendar View Position List so you could add this additional one as well:

Name  text/sidebar (example of secondary position)
File extension PHP (.php)
Syntax type PHP
Content Layout code:

 In "Events Calendar.zip", use the code in "content-types/php-events-calendar-view/html.php"

Enure the following variable is updated to reflect the current Content Layout name (so replace 'text/html' with the name of the current Content Layout):
$current_content_layout_name = 'text/html';

Navigation Object: Events Calendar: create download.php

A Generate File Navigation Object is used to create the file that has the Event Calendar Configuration script:

Name Events Calendar: create download.php
File name download
File extension php
Output directory Use the current directory
Content Layout text/download

 

Go to Events Calendar Views > text/canonical layout and change the ID in the T4 Tag to be the ID for this Navigation Object.

Updating the Section

After the Navigation Object, you will need to update the Calendar Section created when the Section was created and allowed the "Events Calendar Views" Content Types in that Section.

Adding the contents

Add a Content Item to configure the events listing:

Column 1Column 2
Content Type Events Calendar Views
Name Event Listing
Events Calendar Config Link ink to the Calendar Section (current Section, in this case)
View General Page (Heading + List)
Position in the page Default
Main View Section Link to the Calendar Section (current Section, in this case) (It overwrites Main View Section element of Calendar Configuration) 
Options

See Events Calendar Configurable Options for more information (It overwrites the Options element of Calendar Configuration) 

Verifying the steps so far

If you've followed along so far you should:

  1. See the list of Events in the Calendar Section
  2. In the Section you should see a "download.php" file that it is blank.

Finishing up

When the Event Calendar module is working, we need to set up the JS for the ajax functionality, add the content in the sidebar and the canonical links. 

The first step is to add the JS File for the ajax functionality:

Media Type: JavaScript

If a JavaScript Media Type doesn't exist, create one and associate the "javascript/*" Content Layout with it:

Screenshot of the JavaScript Media Type with an associated Content Layout

Media Layout: JavaScript Content Layout

If it does not already exist, add another Content Layout to the Media System Content Type named "javascript/*". In the Content Layout code field add the following:

<script type="text/javascript" src="<t4 type="content" name="Media" output="file" />"></script>

JavaScript File 

The "php-events-calendar.js" file can be uploaded to any Media Category. Select JavaScript as the Media Type. 

Navigation Object: Events Calendar: get Sidebar

Related Content Navigation Object is used to get the canonical links code in Events Calendar View

Name Events Calendar: get Sidebar
Fetch method Use current
Content Layouts Use alternate Content Layout
Content Layout text/sidebar 


Navigation Object: Events Calendar: get Canonical Links

This is used to get the canonical links code in Events Calendar View

Name Events Calendar: get Canonical Links
Fetch method Use current
Content Layouts Use alternate Content Layout
Content Layout text/canonical

 

 Go to your Page Layout and add the Navigation Object in the header, within the <head> tag.

Page Layout

Any Page Layout can use the Event Calendar. In the one used in the Calendar Section add the following:

Site Structure: Adding content in the Calendar Section

In the Calendar Section add the following Event Calendar Views and 

Add a Content Item as below:

Column 1Column 2
Content Type Events Calendar Views
Name Event Calendar: Generic Search
Events Calendar Config Link link to the Calendar Section
View Generic Search
Position in the Page Default (Placed the content before the Generic View)
Main View Section link to the Calendar Section  (It overwrites Main View Section element of Calendar Configuration)
Options see Events Calendar Configurable Options for more information  (It overwrites the Options element of Calendar Configuration)

 

Content Type Events Calendar Views
Name Calendar Switcher
Events Calendar Config Link link to the Calendar Section
View Calendar Switcher
Position in the Page Sidebar
Main View Section Link to the Calendar Section  (It overwrites Main View Section element of Calendar Configuration)
Options see  for more information  (It overwrites the Options element of Calendar Configuration)

 

Content Type Events Calendar Views
Name Event Calendar: Past Events
Events Calendar Config Link link to the Calendar Section
View Categories
Position in the Page Sidebar
Main View Section Link to the Calendar Section  (It overwrites Main View Section element of Calendar Configuration)
Options see  for more information  (It overwrites the Options element of Calendar Configuration)

Add Content Items for each individual event using the Event Content Type.

Site Structure: Updating the Items Section (or Events Section)

After creating the Event Calendar Views in the Calendar Section, you must add them to all Sections that are added to the Event Content Type, since the fulltext page is using the Event Calendar Module to correctly display dates.

Make sure you enable the ability to add Event Calendar View in each Events Section.

Site Structure: Adding the Event Calendar View in the Items Section (or Events Section) 

Add the following Content Type in each Section that contains the events Content Type (it can be mirrored):

Content Type Events Calendar Views
Name Event Calendar: Fulltext configuration
Events Calendar Config Link Link to the Calendar Section
View Event Fulltext setting
Position in the Page Default 
Main View Section Link to the Calendar Section  (It overwrites Main View Section element of Calendar Configuration) 
Options See  for more information  (It overwrites the Options element of Calendar Configuration) 

Add the download iCal Version link

To provide a link to the iCal of an event, use the following code in the fulltext layout of the Event Content Type:

<?php echo $t4_module['allevents']; ?>download.php?event_id=<t4 type="meta" meta="content_id" />

If you want to add this to a different view you will need to change:

<?php echo $t4_module['allevents']; ?>  

to include a Section Details Navigation Object pointing to the Calendar Section.


Final verification

Once you have followed the whole installation guide you should have now the Event Calendar Module installed with the following features:

  • The full Event Calendar as visible in the above screenshot
  • Searchable Events with ajax functionality
  • Canonical URLs in the Calendar Section
  • Fulltext Page with PHP code and a download link.

Once you've completed this step, you can customize the design of the single views file and the configuration settings.

Back to top