You can easily create a Community Events custom collection, in three easy (sort of easy) steps:
1) Create a custom collection form
2) Add some sample data into your collection
3) Create a custom collection page, and paste in the page code
This collection demonstrates a "more info" button where the user could click to expand the table to see the address and other details on an event. (This could be useful to other types of collections you may want to build.)
Go to Settings -> Custom Collection, and add a custom collection.
1) Form Title: Community Events
2) Add field. Type: Date. Name the field: Date/Time (required)
3) Add field. Type: Short Answer. Name the field: Title (required)
4) Add field. Type: Paragraph. Name the field: Description
5) Add field. Type: Yes/No. Name the field: Approved
6) Add field. Type: Short Answer. Name the field: More Info
7) Add field. Type: Address. Name the field: Location
8) Add field. Type: Short Answer. Name the field: Cost
Before you save the form, you'll need to enter some data into the "Settings" tab:
1) Singular name: Event
2) Identifier: events
3) Icon: your choice. I suggest: fa-calendar-check-o
4) API Access: none
Now, you can save the custom collection. Notice you will also see this custom collection in your Admin sidebar. Find the new option and select it to go to the collection.
Add a few entries using the "Add Event" option at the top right. Add several events into your collection.
Now you can decide where you want the Directory page to be. You can navigate to the parent page, and then click "Create" to make a new child page at that location.
1) Add a new page.
2) Choose the "Custom Collection" page type.
3) Select the template you want to use for the display page.
4) Select the "Community Events" custom collection.
5) Click the Edit field in the center of the page, and paste in this code into this field area. Then click save, and then publish the page:
<style>table, th, td { border: 0px; border-collapse: collapse;}.communityEvents { min-height: 20px; padding: 5px; margin-bottom: 20px; background-color: #f1f1f1;}</style><table style="width:100%"> <tr> <th width="20%">Date</th> <th width="75%">Title</th> <th width="5%">More</th> </tr>{% for events in su.collection( "events" ).sort( "events.dateTime" ) %}
<tr style="padding:5px"> <td>{{ events.dateTime }}</td> <td width="90%">{{ events.title }}</td> <td>{% set identifier = random(9999999999999999) %} <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#{{ identifier }}" aria-expanded="false" aria-controls="{{ identifier }}"> More Info </button></td></tr><tr><td></td><td colspan="2"> <div class="collapse" id="{{ identifier }}"> <div class="communityEvents"> <strong>Description:</strong> {{ events.description|markdown }} {% if events.location.address %} <br><strong>Location:</strong> {{ events.location.address }}, {{ events.location.city }} {{ events.location.state }} {{ events.location.zip }} {% endif %} {% if events.cost %} <br><strong>Cost:</strong> {{ events.cost }} {% endif %} {% if events.url %} <br><strong>Link:</strong> <a data-cke-saved-href="http://{{ events.url }}" target="_blank" href="http://{{ events.url }}" target="_blank">{{ events.url }}</a> {% endif %} </div> </div> </td> </tr>{% endfor %}</table>
Don't Stay Invisible.
Get noticed. Don’t blend into the background.
Take action today and start building.
© Copyright 2002-2025 SimpleUpdates.com Inc., All Rights Reserved
About
Acceptable Use Policy
Privacy Policy
Terms of Service
Receive the latest news, offers, promotions, support tips and website goodness.