How to build a WordPress event calendar from user submissions

Looking for a WordPress event calendar that allows you to display events, and easily add user submissions? We have the solution for you!

Do you need a WordPress event calendar for user submissions?

Building an example WordPress event calendar is fairly simple, but it's still a lot to cover in a blog post. If you would like more in-depth instructions, the knowledge base article is recommended reading.

Step 1 - Build a WordPress form for new user-submitted events

This form needs some basic minimum information. It must include the Event Name and Event Date. You also have the option to create multi-day events, and events that repeat. If your events will utilize these features, add fields to your form for these options too.

Next, add a more detailed description of your event. You may want to include an event itinerary, dress code, venue details or even a seating plan. Add fields to your form for any details you wish to display.

For my example I'm going to setup a calendar for a school website, so my form looks like this:

At this stage you should define the settings to limit your form visibility and submission permissions. Would you like the form to be used by administrators only, or for user-submitted events too? Configure these settings to best suit your unique requirements.

Step 2 - Build the WordPress event calendar view

Formidable comes with an option to display form data in a calendar View, so this bit is really easy. Setting up an event calendar view is almost exactly the same as a normal View. The only difference is you choose the Calendar View type.

Select the fields that set the event start date and event duration and repeating options if required.

The calendar overview doesn't have space for lots of text, so keep the main content simple. I'll display just the event name in the overview with a link to find out more about each event.

<h3><a href="[detaillink]">[2752]</a></h3>

Swap out 2752 for the ID of the field that contains your event name.

At this point make a few test entries in your form. Then copy your View shortcode and publish it on a page to get an idea of how it's going to look.

Step 3 - Build the detailed page for the WordPress event calendar user submissions

The detail page allows you to display all the extra information associated with the event. I've added a little formatting to my code, but it really is just a list of all the fields for that entry. My code for the detail page is:

<table style="width: 100%;" cellpadding="20">
 <tbody>
 <tr>
 <td><strong>Event:</strong> [2752]</td>
 <td><strong>Date:</strong> [2753]</td>
 <td><strong>Duration:</strong> [2754] Day(s)</td>
 </tr>
 </tbody>
 </table>

<hr>
 <strong>Details:</strong> [2755]
 <hr>

<table style="width: 100%;" cellpadding="20">
 <tbody>
 <tr>
 <td><strong>Ticket Price:</strong> [2756]</td>
 <td><strong>Organizer Contact:</strong> [2757]</td>
 <td><strong>Booking URL:</strong> [2758]</td>
 </tr>
 </tbody>
 </table>

<hr>
 <img src="[2759]" alt="" class="aligncenter" size-large />

The resulting detail page looks like this:

Step 4 - Allow easy front-end event editing

Even the best laid plans can come unstuck. It might be due to inclement weather or issues with the venue. So easily editing your events is essential.

To enable editing for your event calendar, first go to your form settings page. Scroll down to 'Permissions' and check the Allow front-end editing of entries box. Determine which user role can edit their own submissions and which user role can edit responses submitted by others. Usually this is set so logged in users can edit their own entries, and only administrators can edit other user submissions.

Add an edit link to the View. This can be added in either the Listing Page, or the Detail Page box (or both). The edit link is only visible to logged-in users who have permission to edit that entry. So it will be invisible to the majority of your visitors.

[editlink label="Edit" page_id=y]

Replace 'y' with the Page ID where your form is published. Follow these instructions to find the page ID. Then click Update to save your View. Now an "Edit" link will appear next to each entry for quick and easy event changes.

Enjoy your WordPress event calendar

That's it! Four quick steps and you have the perfect WordPress event calendar for user submissions!

Have you used a calendar View to build something you're proud of? Submit it to our community showcase. We'd love to see your creation!

Not using Formidable yet? Get started today with the most powerful form creator and data management plugin.