#

Calendar

With the Event Module, your customers won't miss your next big event.

The Calendar Module helps you showcase upcoming events and keep your audience engaged. With this module, you can schedule events with automated publishing, create rich event descriptions using an intuitive editor, and organize events by categories, making it easy for your audience to stay connected with your upcoming activities.

# Before You Start

Make sure you have:

A Solodev CMS installation
A Website set up in your workspace

Note:

For step-by-step instructions on adding a Module in your CMS, please visit Add a Module.

# Step-by-Step Setup Guide

These steps will guide you through the process of installing the Calendar Module and adding it to your page.

Navigate to Modules

In your CMS dashboard, click Modules in the left navigation menu

Add the module

Click the Add Module button
Select from the three options:
- Datatable: Creates a simple data table structure
- Module: Builds a custom module from scratch
- Package: Installs a pre-built module from a zip file
Click Submit.

Create a new file on your preferred location
Add the HTML code for your calendar list layout using the example code provided

<div class="container">
  <h1 class="text-center">Calendar</h1>
  <div class="mt-5">
    <div class="row border-lg-bottom py-4">
      [repeater id="" order="start_time desc"]
        <div class="col-lg-3">
          [is_set value="{{calendar_image}}"]	
            <img alt="{{event_title}}" src="[get_asset_file_url id='{{calendar_image}}']" class="img-fluid img-thumbnail">
          [/is_set]
          [is_empty value="{{calendar_image}}"]
            <img alt="{{event_title}}" class="img-fluid img-thumbnail" src="/_/images/default-2.jpg" />
          [/is_empty]
        </div>
        <div class="col-lg-9 ps-lg-3 mt-4 mt-lg-0">
          <h2><a aria-label="Read more" href="{{path}}">{{event_title}}</a></h2>
          <p class="text-muted fs-6">[print_date format="M. d, Y g:i a" timestamp="{{start_time}}"]</p>
          <p>{{calendar_intro}}</p>
          <p><a aria-label="Read more" href="{{path}}"><strong>Read More</strong></a></p>
        </div>
      [/repeater]
    </div>
  </div>
</div>

Important!

You need to add the ID number of your calendar module to the repeater shortcode within the id="" attribute.

Insert your calendar repeater file into the page you want to display the entries on.

Note:

To learn more about shortcodes and how they work, visit our shortcodes documentation.

Create a file in your preferred location.
Add the HTML code for your calendar list layout using the example code provided

<div class="container">
  [entry]
    <article class="row justify-content-between mt-3">
      <div class="col-md-7">
        <h2 class="border-bottom border-primary border-2 mt-2">Upcoming events</h2>
        <div class="mt-4 pe-7">
          <p>{{calendar_info}}</p>
        </div>
      
        <h3>Dates</h3>
        <p>[print_date format="M. d, Y" timestamp="{{start_time}}"] <br>[print_date format="g:i a" timestamp="{{start_time}}"]</p>
      
        <h3>Location</h3>
        <p>{{calendar_address}} {{calendar_address_suite}} <br> {{calendar_address_city}}, {{calendar_address_state}} {{calendar_address_zip_code}}</p>
      </div>
      <div class="col-md-4">
        <img src="/_/images/logo.jpg" alt="Logo" class="img-fluid">
      </div>
    </article>
  [/entry]
</div>

Insert your calendar detail file into the page you want to display the entries on.
Map your Module to your page:

In your Module, click Modify
Under Websites Properties
- On Detail Page Template, select the .stml file for your detail page
- Under Detail Folder Location, select the folder where your detail file is located
Click Submit

Important!

If you already have entries added to your module, you will need to resave them to generate the path. To do this, go to Modify, scroll to Advanced, check the Resave All Entries option., and then click Submit

Click Add Entry to begin adding content to your module
Go to your website and refresh the page to see your calendar module in action

# Support

Support for Calendar Module is handled directly through Solodev's global help desk. For more information regarding support queries, go to www.solodev.com.