Support.

Community Events Collection

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.)

Create a custom collection form

Go to Settings -> Custom Collection, and add a custom collection.

Note: it is important that you use these exact field types and names so that the HTML code below will function properly.

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 some Event data into your collection

Add a few entries using the "Add Event" option at the top right. Add several events into your collection.

Create a custom collection page, and paste in the page code

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>