Displaying a calendar on your website is a must for many business owners. Calendars are the best way to share all the upcoming events that your business has with your audience. However, the various calendar plugins available on the market often have too few features, expensive add-ons, or are too complicated to set up.
The Pro Event Calendar plugin makes adding an affordable, professional, and sleek calendar to your posts and pages easy. In this tutorial, I will go over how to create events, how to create the actual calendar, how to style the calendar, and how to add the calendar to your website so all your visitors can stay up to date with your business.
What We Will Be Building
For this tutorial, we are going to be the owners of a yoga studio. We would like to let our customers and potential customers know when we run our Monday morning yoga class called "Monday Mood Lifter," so we are going to build a calendar to display on our webpage. This calendar will be a dark-skinned calendar that all our website viewers can see and interact with.
Before we can create our calendar, we need to create some specific events so we can display these events on the calendar. To add an event, head on over to the Event Calendar in your WordPress dashboard and click All Events. Next to the title, Pro Event Calendar, click Add New. You will then be taken to the event editor, where we are going to title this event Monday Mood Lifter.
Next, we are going to go over to the right-hand side of the editor and adjust the date of the event as well as the start and end time. We want this event to be a weekly event that starts on the first Monday of August and ends at the end of the month. In the date section, enter 2019, 8, and 5. This will set the date to start on 5 August.
Our start time is going to be 10 am, and our end time is going to be 11 am, so we are going to type those in the appropriate fields under the date section. Since we want to have this event occur every Monday, we are going to head over to the Select a frequency section and choose Weekly from the drop-down menu. Then select the Mon option from the new menu that is displayed below the drop-down menu. To set the end date, head over to the End Date section. We are going to type in 2019, 8, 26.
Finally, we are going to change the color of the event that will appear on the calendar. We are going to do this so our website viewers will easily be able to spot that there is an event on a particular day.
Scroll down on the event editor page until you come to the Event Data section and find the Color option. To add a color to this particular event, you will first need to create a color for it to be displayed in the drop-down menu. To do this, click the special events link. This will take you to the special dates and event color menu, where you will click the Add New Special / Event Color button. Add the text Blue in the Title field and choose the color blue in the Color field.
Click the Submit button, and the blue color will now be available. Now head back over to the Event Data section. Click the drop-down menu next to Color and select the blue color that you just created.
We are done creating our event, so click the Publish button on the right-hand side of the editor. Check out the video below to watch the event creation process in action:
Creating the Calendar
Now that we've created the event that we would like displayed on the calendar, it is time to create the calendar itself. On the left-hand side of your WordPress dashboard, click Calendars under the Event Calendar section. This will pull up the calendars list, where you will then click the Add New Calendar button. Under General Settings > Title, we are going to type in Yoga Schedule.
Next, we are going to change around a few of the display settings. We are going to change the skin and show the time. In the drop-down menu next to skin, choose Dark, which will change the interface of the calendar to be a darker color. Next, check the Show Time box, which will show the event time on the calendar. At the bottom of the editor, click Save, and your calendar will be created and shown in the calendars list. You can view the video below to watch how to create a calendar.
Adding the Calendar to Your Website
The WordPress Pro Event Calendar plugin makes use of shortcodes to add the calendar to your website. Once you have created your calendar, it will appear in the Calendars List. You will see that there is a Default Shortcode column in the calendar list.
Next to your calendar, you will see a custom shortcode. Copy this shortcode to your clipboard. From there, you will then create a new page or post. Under the visual editor for the page or post, paste the shortcode. Click the Preview button on the right-hand side of the editor, and your calendar will now be shown on your page or post. To see how to add the calendar to your website, watch the video below.
Getting the Most Out of Pro Event Calendar
This calendar creation tutorial only scratches the surface of what this plugin can do. This calendar plugin is rich with features that can be added to your calendars to make them more useful to your audience and your business. Here are a few features that this plugin offers that will take your calendar to the next level.
The booking option allows you to have your website viewers book a specific event. This allows you to know who will be attending your events so you can plan accordingly. You can also set the maximum number of people able to book an event, so your specific event does not get overbooked.
In the plugin settings in the back-end of your WordPress site, you will be able to see who has booked a specific event, and you will be able to export this list to an Excel spreadsheet.
Subscribe to a Calendar
This is an incredibly useful feature. The subscribe to calendar feature allows your website viewers to subscribe to any calendar that you create. When a user subscribes to a calendar, they will get notified anytime there is a new event. Having this email reminder sent to your audience's mailbox will make sure that they do not forget your event, so make sure you turn on this option in the Edit section of your Calendars.
Google Map Support
If you are running an event that requires people to come to a specific location, then this feature should definitely be enabled. This makes it much more convenient for your customers to plan their trip to your event. They can see the calendar and get directions to your event all in one place instead of having to browse around to find your event's location.
The Pro Event Calendar plugin will give you the tools necessary to create a custom calendar for your WordPress website. In this article, I showed you how to create an event, add it to a calendar, and display it on your WordPress website with the Pro Event Calendar plugin.
If you are interested in purchasing this calendar plugin, visit CodeCanyon to download it. Also, feel free to search through the various other calendar plugins on CodeCanyon if this one isn't quite right for you.
- WordPress20 Best WordPress Booking and Reservation PluginsFranc Lucas
- WordPress20 Best WordPress Calendar Plugins and Widgets (+5 Free Plugins)Daniel Strongin
- WordPressHow to Create a Google Calendar Plugin for WordPressAshraff Hathibelagal
- WordPressBest Free WordPress Calendar PluginsMonty Shokeen
- WordPress Plugins27 Best Popup & Opt-In WordPress PluginsDaniel Strongin
- WordPress12 Best WordPress Weather Widgets & Plugins (With 5 Free)Franc Lucas
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post