# The Solodev Calendar Module makes it simple to schedule, organize, and showcase upcoming events on your website. Publish details with rich descriptions, add categories, and ensure your community never misses an important date. - **Create and manage events with ease** – Schedule events quickly with automated publishing. Add details, descriptions, and categories through an intuitive editor. - **Fully customizable organization and display** – Control how events appear, from categories to layouts. Tailor the calendar to highlight different types of activities and make them easy to find. - **Keep your audience engaged and informed** – Share everything from community meetups to major announcements. Ensure visitors stay connected with your brand and up-to-date on what’s next. ## Before You Start Make sure you have: - A [Solodev CMS](/quickstart) installation - A [Website](/websites/add-website/) set up in your workspace !!!Note: We use Bootstrap 5 in our packages. You can update your code to match your own framework, styles, or preferences as needed. !!! ## Step-by-Step Setup Guide These steps will guide you through the process of installing the Calendar Module and getting it live on your page. {% tabs %} {% tab title="Step 1: Install the Calendar Module" %} 1. Navigate to Modules

In your CMS dashboard, click Modules in the left navigation menu
Click the Add Module button

2. [Add the module](/modules/add-module/)

Give your calendar module a name
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
In this case, select Package: and use this zip file .
Click Submit.

{% endtab %} {% tab title="Step 2: Create Your Calendar List Page" %} 1. Navigate to `Websites > example.com > web files > content`

Create a folder called calendar
In the calendar folder, create a new code file called calendar-repeater.tpl

2. Add the calendar code using the example template provided below. ```html calendar-repeater.tpl

Calendar

Promote events and keep your audience connected with a dynamic calendar.

[repeater id="" order="start_time desc"]

[is_set value="{{calendar_image}}"] ${{event_title}}$ [/is_set] [is_empty value="{{calendar_image}}"] ${{event_title}}$ [/is_empty]

[print_date format="M. d, Y g:i a" timestamp="{{start_time}}"]

Read More

[/repeater]

``` !!!danger Important! You need to add the ID number of your calendar module to the repeater shortcode within the `id=""` attribute. !!! 3. Click Publish. 4. Navigate to `Websites > example.com > www`

Create a folder called calendar
In the calendar folder, create a page called index.stml
Give your page a Title, and select a Template (optional)

5. [Insert your calendar repeater file](/websites/page-overview/#add-a-file-to-page) into the page you just created. 6. Click Publish. 7. Go to your website and refresh the page to see your blog in action.

{% endtab %} {% tab title="Step 3: Create Your Event Detail Page" %} 1. [Create a file](/websites/folder-overview/add-file/) in your preferred location. 2. Add the HTML code for your calendar list layout using the example code provided ```html

[entry]

Upcoming events

Dates

[print_date format="M. d, Y" timestamp="{{start_time}}"]
[print_date format="g:i a" timestamp="{{start_time}}"]

Location

{{calendar_address}} {{calendar_address_suite}}
{{calendar_address_city}}, {{calendar_address_state}} {{calendar_address_zip_code}}

[/entry]

``` 3. [Insert your calendar detail file](/websites/page-overview/#add-a-file-to-page) into the page you want to display the entries on. 4. 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

!!!warning 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 !!! 5. Go to your website, refresh the calendar page, and click on an entry. {% endtab %} {% endtabs %} ## 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](https://www.solodev.com/). !!!Note: To learn more about shortcodes and how they work, visit our [shortcodes](/shortcodes) documentation. !!!