Platform
- Cloud
- CMS
- AI
- Blockchain
- Digital
- IoT
- Metaverse
- Mobile
Explore
Marketplace
Careers
Contact Us
Connect

Creating an Event Module with Solodev

An events module is a great way to keep your online audience aware of upcoming events. This tutorial will teach you how to build a calendar-based event module in Solodev.

Solodev Required

This tutorial covers building an event module in Solodev using shortcodes.

Note: To learn more about creating an events module in Solodev, check out our in-depth technical documentation.

Displaying a calendar of company and industry events on your website adds value to your website and keeps your audience engaged in the activities of your brand. In this article, Solodev will show you the basics of creating an event module in Solodev using shortcodes.

Step 1 - Create your Event Module

Open the folder to which you want to add your event module. Hover over the Add button and select Calendar.

Note: You can add a module to any location within the Solodev system; however, we recommend creating a dedicated "modules" folder inside the "web files" directory in order to keep all of your modules organized and easy to find.

For enterprise users, we suggest creating your modules inside your "Data Center" directory.

Step 2 - Select your Module type

Select "Events" from the dropdown menu as shown below

Select your Module type

Step 3 - Upload your Events Form

Copy and paste the code below to a simple text document with .tpl at the end of the file name such as "event-form.tpl".

<div class="row">
  <div class="col-md-6">
    <div class="form-group">
      <label class="control-label" for="publishState">Publish State</label>
      <select id="publishState" name="publishState" class="form-control">
        <option selected value="draft">Draft</option>
        <option value="publish">Publish</option>
      </select>
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-group">
      <label class="control-label" for="image">Featured Image</label>
      <input class="form-control" id="image" name="image" type="file">
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <div class="form-group">
      <label class="control-label" for="address">Address</label>
      <textarea rows="5" id="address" class="form-control" name="address">

Event Short Description (Less than 200 characters)

Event Long Description

Click on Upload Form and select the file you just saved. Then click Submit.

Upload Form

Step 4 - Create your Repeater Template

Copy and paste the code found below to a simple text document with .tpl at the end of the file name such as event-repeater.tpl inside your module folder

<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.css" rel="stylesheet" type="text/css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js" type="text/javascript">
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.js" type="text/javascript">
</script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js" type="text/javascript"></script>
[js_full_calendar_includes]
<div class="container">
   <div id="calendar_display"></div>
</div>
<br>
[js_full_calendar calendar_id="18"]
<script>
   $('div.content-wrapper').removeClass('content-wrapper').addClass('content-wrapper-events'); // Removing .content-wrapper to prevent the font resizer from adjusting the menu
</script>

Note - the only thing that needs to be edited in this code, is the following section:

calendar_id="" limit="0,9" type="calendar"

The calendar_id="" needs the ID of the event module. Open the event module and look for the ID at the top left under the name of the module. Place the ID number inside the quotes ("").

The image below outlines where to find the ID of the module.

Calendar ID

Step 5 - Style your Event Module

Download the file below and copy and paste the CSS into the main stylesheet of your website

event.css

Step 6 - Add entries to your module

Now that you have created the event module it's time to add event entries. Open your event module and click Add Entry as shown below.

Style your Event Module

Fill out your form fields (created when you uploaded your form) and click Save.

Step 7 - Add your repeater template to an STML (Web Page)

Click Add->STML, name your page, select its parent folder and template. Click Save.

Add your repeater template to an STML

Navigate to the repeater file in the left tree and select the dynamic div on your new web page and click on the repeater file as shown below.

Add your repeater template to an STML

If you followed the steps above correctly your event page should appear as shown below.

Share on Facebook Tweet It

Matthieu McClintock
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev

Terms Privacy Policy