Tech Blog

Events Planner

Planner allows the universty to generate a feed of Events that a Student can attend. A student can then add this to my planner to be stored and referenced later.

A copy of the code base is here to get you started.

Exlib Planner – GitHub

This version of the code is read only.

To make this work you will need to change the following in package.json

"name": "@ombiel/exlib-planner-developer-network",

Change the name to the package name you would like.

"ombiel": {
 "boilerplate": "@ombiel/exlib-boilerplate-aek-react@0.2.12-react15-2",
 "access": {
 "read": true

Change access and remove read: true and add the following

"write": {

This will then allow you to push and control your own version of this package.

Before starting this package you will need to install the AEK node_modules. Go to the directory the project is in and do the following command

aek install

This will install all the required dependencies allowing you to work on this package locally.

The package as default is pointing to a local version of the data.

This data is located in /public/testData.json. From here you can see the format of the information and copy this when creating your json file.

Once you have setup your hosted version of your .json file you can then use a server side request to fetch this information.

To do this you simple need to modify a few files.

The first to modify is in src/screens/includes/actions.twig

You will see this line

{% set service = aek.create_service("") %}

Simply add your URL to your file in the “” this will then fetch the file.

The next file you need to change will allow us to call this file

To do this we need to change the file src/js/scripts/planner-utils.es6.js

In here you will see Line 75 is commented out. You need to flip this around (see example below).


//request.action('get-events').end((err, response) => {
 var url = _.publicPath('testData.json');
 request.get(url).end((err, response) => {


request.action('get-events').end((err, response) => {
//var url = _.publicPath('testData.json');
//request.get(url).end((err, response) => {

You can switch this back at any time to use the local data.

If you are using the same fields as we are the data should flow correctly. However if you are not you may need to make changes to the code base which can lead to other issues so we recommend you use our structure.


This package contains configuration allowing you to change some parts of the project with ease without having to go into the code base itself.

In the file /src/screens/includes/config.twig you will see the following

storageKey  – Key for use of storage within the integration.

Language – Which language needs to be used see main.ect to change this if needed.

Theme – Which theme to use. See main.ect to change this if needed.

Currency_prefix: Which Currency needs to be used. See main.ect to change this if needed.

dateInputFormat: Format the date is in. Change if required.

dateDisplayFormat: Which date format we should show. Change if required.

hourFormat: Format the date is in. Change if required.

filterList: Used on the Events page to show the fields in this order. Change and add fields if needed.

Language can also be configured without going into the code base. This is located at src/screens/presets/language/en.twig

You can see the following

homeIcon – Icon used in nav bar for Home Page.

searchIcon – Icon used in nav bar for Search page.

myEventsIcon – Icon used for myEvents page on the Nav bar

homeMenuText – Text used for the home page in the Nav bar.

searchMenuText – Text used for the search page in the Nav Bar.

myEventsMenuText – Text used for the myEvents page in the Nav Bar.

filterHeader – Text for filters

Subject – Name of the Subject Filter

Type – Name of the TypeFilter

Campus – Name of the Campus Filter

moreinfo – Button Text for more info if the event has a external URL

indexHeader – Title of the main page.

indexCTA – Text used for the CTA for the main page.

errorMessage – Error message if no events have been returned from the service.

searchErrorMessage – Error message if no results found while searching. Will add in the search result after this text.

myPlanTitle – Title of the myEvents page

noMyEvents – Text shown if there are no events in the myEvents page.

noData – Text shown if Event has been deleted since adding.

removed – Text shown when a item has been removed from myEvents.

added – Text show when a item has been added from myEvents.

removeText – Text shown when a event has been added on the button to add or remove event.

addText – Text shown when a event is not added on the button to add or remove the event.

myEventsHeader – Header for the My Events Page.

searchPlaceholder – Text shown as a place holder on the search bar.

landingPageHeader – Header for Home Page

Leave a Reply