Create an Events Module

An Events Module displays entries in the form of a Calendar and gives you the option to add a start and an end date and time. An Event is a Type of Module that you can use when creating or modifying a Calendar. The following steps will show you how to create an Events Module from scratch.

Screen_Shot_2017-06-16_at_4.30.08_PM.png


All Modules should be built inside the Managers folder under /web files/managers/. Each Module should have its own folder within this directory.

Step 1 - Add an Events Module

On the Actions Menu, hover your mouse on Add and select Calendar.

Add Calendar


Step 1.1

Name your Calendar and select 'Events' from the Choose Type dropdown and click Submit. This will auto-populate standard HTML fields for your events module so you can begin adding entries immediately.

Events Calendar

Note: If you would like to customize your events module and designate your own HTML fields, select "custom" from the drop down. In order to create a custom event module you will need to create a form using one of the three methods below and upload your form prior to clicking submit:
  • Table Schema (preferred)
  • Select a form previously created with the form builder.
  • Upload an HTML form.

For information on how to create forms, please view Add a Datatable.


Adding Event Entries

Now that you've created your events module, it's time to start creating entries. Click Add Entry as shown below.

Screen_Shot_2017-06-16_at_4.09.33_PM.png

The default "event" HTML fields will appear as shown below and you can begin adding entries immediately.

Screen_Shot_2017-06-16_at_4.11.21_PM.png


Step 2 - Adding Repeater

Now that we have created an Events Calendar, we need a place where to display it. To do that, lets create a repeater template and add it to a stml page.


Step 2.1

On the same folder you created the Events Calendar, add a File. From the Actions Menu hover on Add and select File by clicking it.

Add File


Step 2.2

Name the file and add the .tpl extension at the end of the file name.

The file of the name should be written in lowercase and with no spaces. Add a dash (-) between words. For more information on adding a File, please go here.


Step 2.3

We need to write the code to make our entries show. Please refer to the Shortcodes section to find more information on this topic.

This next step needs some developing knowledge (HTML and CSS min.)

For Events we recommend using Full Calendar short codes due to the amount of entries we would end up having in this type of Module. 


Step 2.4

Add the code below to your repeater file.

[js_full_calendar_includes]

<div class="container">
<div id="calendar_display"></div>
</div>

[js_full_calendar calendar_id="538"]
  • On [js_full_calendar calendar_id=""] you need to add the calendar_id="" for the one corresponding to your Module ID.
  • Our code uses curly brackets to display the elements on the page. Refer to the form you uploaded to the Calendar to find the html fields corresponding.

Step 2.5

Once you have added your code, click Save. The file will be saved but you need to go back and Publish it to make it live.

Screen_Shot_2017-06-16_at_4.23.49_PM.png


Step 3 - Adding an Index STML

Step 3.1

We need to create an stml to include our repeater. On the www folder, create a folder for the Photo Gallery and Add stml from the Actions Menu. Name your file index.stml and choose a template from the template dropdown.

Step 3.2

Click on a Dynamic Div and click on your repeater.tpl file from the left nav to add it to the stml. Click Publish.


Step 4 - Adding a Detail Page

In the case of Events, we need to create a detail page to display the detail event.

Step 4.1

To do this we need to add a file on the Events folder where we created the Module, name it and add the following code.

   
[entry]
<div class="row">
  <div class="col-sm-8">
    <h2>{{name}}</h2>
    <div class="media">
      <div class="meta-data">
        <span class="longDate">[print_date format="F j, Y g:ia" timestamp="{{start_time}}"] [print_event_end format="F j, Y g:ia"]</span> [is_set value="{{address}}"]
        <p class="address-text">{{address}}</p>
        [/is_set]
      </div>
    </div>
  </div>
  <div class="col-md-4 event_image">
    [is_set value="{{image}}"]
    <img alt="{{name}}" src="[get_asset_file_url id=" {{image}} "]"/> [/is_set]
  </div>
</div>
<div class="row event_description">
  <div class="col-md-8">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">About This Event</h3>
      </div>
      <div class="panel-body">
        <p>{{event_description}}</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="event_right_description panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">When & Where</h3>
      </div>
      <div class="panel-body">
        <p>{{address}}</p>
        <span class="longDate">[print_date format="F j, Y g:ia" timestamp="{{start_time}}"] [print_event_end format="F j, Y g:ia"]</span>
        <div class="event_right_description_btn">
          <a class="btn btn-sm" href="[ics_url id=" {{calendar_entry_id}} "]" type="button" target="_blank"><i class="fa fa-calendar"> </i> Add to Outlook</a>
          <a class="btn btn-sm" href="[google_calendar_url id=" {{calendar_entry_id}} "]" type="button" target="_blank"><i class="fa fa-calendar"> </i> Add to Google Calendar</a>
        </div>
      </div>
    </div>
    [is_set value="{{contact_info}}"]
    <div class="event_right_description_bottom panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Contact Information</h3>
      </div>
      <div class="panel-body">
        <h4>Contact: <a href="mailto:{{contact_info}}">{{contact_info}}</a></h4>
      </div>
    </div>
    [/is_set]
  </div>
</div>
[/entry]
  

Step 4.2

Once you have added your code, click Save. The file will be saved but you need to go back and Publish it to make it live.


Step 5 - Add a Detail STML

Step 5.1

We need to create an stml to include our detail template. On the www folder where you created the index.stml for the repeater, add another stml and call it detail.stml. Select a template from the Template dropdown and Save it.

Add STML

Step 5.2

Click on a Dynamic Div and click on your detail.tpl file from the left nav to add it to the stml. Click Publish.


Step 6 - Adding Categories

Categories are optional but help you organize your modules. To add Categories, go to the folder where you created the Events Module, hover on Add from the Actions Menu and click on Datatable Category Group. Name your Category Group and click Submit. Start adding your categories. For more information on Category Group, click here.


Step 7 - Mapping your Module and Categories

For our pages to know where to get the entries from, we need to map them in three different places.

Step 7.1

First open the Events module you created on Step 1, click on Modify and open the Website Properties tab.

Modify

Step 7.2

Under SEO URL Encoding you will find HTML Template. Click on Browse and another page with the list of folders and files will open. Select the detail.stml file from the www folder, go to the top on the page, click Ok and you will be redirected to the previous page. Notice that the HTML Template field has a number that corresponds to the ID of the detail.stml.

Next to the SEO URL Encoding field is the Asset Category Map Anchor field. Click on Browse and a modal with a list of folders will open. Select the folder which contains your module's index.stml and detail.stml pages and click Ok.

HTML Template

Step 7.3

Open the Advanced Options tab and under Categories click on Browse. Select the Category Group previously created and click Ok on the top of the page. Now that we have mapped our file and category to the module, we can click Submit at the bottom of the page.

Step 7.4

Go to the Category Group you previously created and click on Modify. Open the settings tab and click on Browse under HTML Template.

Step 7.5

Select the index.stml you created on step 3, go to the top of the page and click Ok. Then click Submit.


Style your Events Module

Add the CSS below to the main stylesheet of your website

events.css

/* ========================
# Events Index
======================== */
.selectize-input {
height: 40px !important;
}
.selectize-input.items {
border-radius: 0;
line-height: 22px;
}
.fc-unthemed .fc-today {
background: #f5f5f5;
}
.fc-right button.fc-today-button {
/*background-color: #00bff3;
color: #fff;*/
text-transform: capitalize;
border-radius: 0;
opacity: 1;
}
#calendar_display.fc {
margin-top: 30px;
}
#calendar_display .fc-toolbar {
margin-bottom: 2.5em;
}

/* ========================
# Events Detail
======================== */
.breadcrumb-container {
margin-top: 0;
}
.ct-content h2 {
font-size: 45px !important;
margin-bottom: 30px;
}
p.address {
margin-top: 10px;
}
.media .meta-data {
margin: 0 0 7px 0;
}
.media .meta-data .fa {
margin-right: 10px;
font-size: 20px;
}
.media .longDate,
.media .timeEl {
display: inline-block;
font-size: 18px;
line-height: 18px;
font-family: 'open sans condensed', sans-serif;
font-weight: 700;
color: #00bff3;
text-transform: uppercase;
min-height: 16px;
margin-bottom: 4px;
}
.media .longDate {
border-right: 1px solid #636465;
padding-right: 10px;
}
.media .timeEl {
padding-left: 10px;
}
.image-right {
float: right;
margin: 0 0 20px 15px;
}
.event_description {
margin-top: 30px;
}
.event_description.panel,
.event_right_description.panel,
.event_right_description_bottom {
border-radius: 0;
}
.event_description h3,
.event_right_description h3 {
color: #00bff3;
}
.events-img {
margin-top: 28px;
}
.event_right_description span {
font-size: 16px;
}
.event_right_description_btn {
margin-top: 30px;
}
.event_right_description_btn .btn {
font-size: 1em;
text-transform: capitalize;
margin-bottom: 5px;
display: block;
width: 260px;
text-align: left;
color: #636363;
background-color: #f5f5f5;
border: 1px solid #ddd;
margin-top: 10px;
}
.event_right_description_btn .btn .fa {
margin-right: 10px;
font-size: 17px;
}
.event_right_description_bottom .panel-heading h3,
.event_right_description_bottom .panel-body a {
color: #00bff3;
}

Congratulations! If you followed all the steps correctly, your Event Module should look like the image below:

Screen_Shot_2017-06-16_at_4.30.08_PM.png

0 Comments

Please sign in to leave a comment.
Have more questions? Submit a request