Thursday, October 31, 2019

Show an Event Calendar With a Free WordPress Calendar Plugin

Show an Event Calendar With a Free WordPress Calendar Plugin

Many businesses need to share event calendars with customers. For example, a restaurant can use an event calendar to advertise special musical events, or holiday menus. Similarly, schools can use event calendars on their websites to let students and teachers know about any upcoming activities in school related to sports, exams or other events.

Event calendar plugins are helpful for individuals as well if they want to keep track of different things they are supposed to do. For example, you could use an event calendar plugins to mark important meetings and events like birthdays of friends and family.

In this tutorial, you will learn how to use the free My Calendar WordPress event management plugin in order to create events. The plugin has a lot of amazing features that we will use in the tutorial.

What We'll Be Building

Our focus in this tutorial will be on creating a calendar that allows a company to mark all the events that they manage like parties, weddings, art exhibits etc. They will be able to see all the future and past events.

My Calendar Final Result

We will make the events color coded so that they are easy to identify. Users will be able to click on any specific event category and only see matched events in the calendar. Clicking on any event will show a pop-up with all the basic information about the event like its timing and location.

We will begin by installing the plugin. Then, we will change some settings to modify the input and output. After that, we will create some event categories, add some event locations and finally add the events to our calendar.

Also, there is a good chance that you will want to make some changes to the appearance of the event calendar so that it blends in with the rest of your website. Therefore, we will add some of our own CSS rules in the last step to make some cosmetic changes in the calendar.

Creating an Event Calendar

Setting Things Up

The first step towards creating our event calendar would be installing the My Calendar plugin. Once you have installed and activated the plugin, go My Calendar > Settings in the admin dashboard. You will see a bunch of tabs there.

Click on General and then specify the ID for the page where you want the event calendar to appear. In our case, it is 118. This step is optional and the plugin will automatically create an event calendar page for you when you publish your first event. However, it is good know know how to show the event calendar on a specific page.

General Settings

Whenever you create a new event with this plugin, you will have to fill out some details about the events. This could include many things like event location, short description etc Not all of these input fields are activated by default. Therefore, you should now head to the Input tab and check the fields that you want to appear, as in the image below.

Input Settings

You have probably noticed that there are a lot of buttons and dropdown menus on the event calendar page besides the calendar itself. The order in which these buttons are displayed is controlled by settings in the Output tab. You can drag the elements up and down to display them in a specific order. Just drag an element below the Hide row in order to prevent it from displaying.

Output Settings

It is possible to control what information is shown to users in the pop-up once they click on an event by toggling some checkboxes under Single Event Details.

Output Settings

Creating Event Categories

Now that we have set everything up, it is time to create actual content for our events calendar.

We will begin by adding some categories that will be used to mark different events. This plugin gives users the option to only see events from specific categories. Events can be filtered this way once they have been assigned different categories.

To add a new category to the calendar, simply go to My Calendar > Manage Categories and then specify a name and label color for the category. You can also choose to display an icon before the category by selecting one from the Category Icon dropdown.

Manage Categories

Once you have added all the details for a category, click on the Add Category button to add the category to the event calendar.

Adding Event Locations

Any events that you organize will take place somewhere. The plugin does a great job when it comes to specifying locations of different events.

You can add a new location to the calendar plugin by going to My Calendar > Add New Location. The next page will contain a lot of input fields that ask for different details of the location. This includes the usual things like street address, city, postal code and country etc. You don't have to fill in all these values. Some of these details can be skipped.

Make sure that you have entered a name for the location at the top. This will help you easily identify these locations in the dropdown menu when creating events.

In this example, we will add a location for an art exhibit that is taking place in Kentucky, USA. The address is fictional but it will give you an idea about filling out your own details.

Add Location

The plugin will give users a link to Google Maps with the address that you specified. This makes it easier for people to figure out exactly where the event is happening. Any locations that you add to the plugin can be edited by clicking on My Calendar > Manage Locations.

Adding Events

We can now start adding events to our events calendar. To add an event, simply go to My Calendar > Add New Event.

Now, fill out the title and description of the event. The title is displayed within the dates on the event calendar. The description will be displayed on the event description page when users click on the Read More link in the pop-up. Set the event category to Exhibit from the dropdown menu.

Event Details Description

You can now specify a date and time for the event. There is a good chance that at least a few events that you add to the calendar will be recurring events. In this case, it would be very time consuming to add all the repeated events to the calendar one by one.

To make things easier for you, the My Calendar plugin gives you the option to specify the repetition pattern for an event. This means that you can specify how many times an event will repeat and the frequency with which it will repeat.

Recurring Event Details

At the beginning of the tutorial, we checked the box to enable a short description input field for events. This allows us to provide a short summary of the event which will be displayed in the pop-up whenever a user clicks on the event in the calendar.

Short Event Description

You can specify a location for the event at the bottom of the Add New Event page. Simply choose Art Exhibit (Kentucky) for this example. After that, click on the Publish button at the top or bottom of the page.

Change the Styling of the Event Calendar

After following all the steps in this tutorial, your event calendar will look like the image below. If its styling is different from the following image, simply go to My Calendar > Style Editor and then pick the twentyeighteen.css file from the dropdown in the sidebar as the primary stylesheet for the calendar. There are a bunch of other themes that you can apply to the calendar. Just pick one that you like the most. Some of them like inherit.css are meant to provide the minimum possible styling so that most of the style rules from your theme are automatically applied to the calendar.

Event Calendar Unstyled

The style editor page shows all the CSS rules from the selected file that are applied to the calendar. You can make all kinds of changes here and they will be reflected on the event calendar page.

For now, we will simply adjust the spacing and fonts that are applied to different elements like the table caption, header and category legend at the bottom. We will also add some of our own style rules to adjust the appearance of the calendar to our liking.

Here are all the rules that we add to our event calendar. Simply place them at the bottom of the style editor and the changes will be reflected on the event calendar page once you click on Save Changes button at the bottom.

.mc-main .my-calendar-header .no-icon,
.mc-main .mc_bottomnav .no-icon {
    display: inline-block;
        /* width: 12px; */
        width: 15px;
        height: 15px;
        vertical-align: middle;
        margin-right: .25em;
        border-radius: 12px;
        position: relative;
        top: -2px;
        border: 1px solid #fff;
}

.mc-main .my-calendar-header span, .mc-main .my-calendar-header a,
.mc-main .mc_bottomnav span, .mc-main .mc_bottomnav a,
.mc-main .my-calendar-header select, .mc-main .my-calendar-header input {
        color: #313233;
        color: var(--primary-dark);
        /* border: 1px solid #efefef;
        border: 1px solid var(--highlight-light); */
        border-radius: 5px;
        padding: 4px 6px;
        font-size: 14px;
        /* font-family: Arial; */
        background: #fff;
        background: var(--secondary-light);
}

.mc-main .my-calendar-header input:hover, .mc-main .my-calendar-header input:focus,
.mc-main .my-calendar-header a:hover, .mc-main .mc_bottomnav a:hover,
.mc-main .my-calendar-header a:focus, .mc-main .mc_bottomnav a:focus {
        background: black;
}

div.mc-print {
    margin-top: 2rem;
}

.mc_bottomnav.my-calendar-footer {
    margin-top: 5rem;
}

.mc-main button.close {
        top: 5px;
        left: 5px;
}

.mc-main .calendar-event .details, .mc-main .calendar-events {
        border: 5px solid #ececec;
        box-shadow: 0 0 20px #999;
}


.mc-main .mc-time .day {
        border-radius: 0;
}

.mc-main .mc-time .month {
        border-radius: 0;
        border-right: 1px solid #bbb;
}

.mc-main .my-calendar-header span, .mc-main .my-calendar-header a,
.mc-main .mc_bottomnav span, .mc-main .mc_bottomnav a,
.mc-main .my-calendar-header select, .mc-main .my-calendar-header input {
        color: #313233;
        color: var(--primary-dark);
        border-radius: 0px;
        padding: 4px 10px;
        font-size: 14px;
        background: #fff;
        background: var(--secondary-light);
        border-bottom: 1px solid black;
}

.mc-main th abbr, .mc-main .event-time abbr {
    border-bottom: none;
    text-decoration: none;
    font-family: 'Passion One';
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 1;
}

.mc-main caption, .mc-main.list .my-calendar-month, .mc-main .heading {
    font-size: 2.5rem;
    color: #666;
    color: var(--highlight-dark);
    text-align: right;
    margin: 0;
    font-family: 'Passion One';
    text-transform: uppercase;
}

.mc-main .category-key li.current a {
    border: 1px solid #969696;
    background: #dadada;
}

Now, go to the event calendar page and click on one of the events that you added. This should open a nice pop-up that shows all the basic details of the event like its timing, location and a short description.

Event Calendar Styled

Final Thoughts

In this tutorial, we learned how to use the My Calendar plugin in order to create a basic event calendar for our website. The plugin makes it really easy to create and add events along with a simple description.

However, there are still a couple of things missing from the plugin like widgets and a more advanced description page that provides extra features like payment options and the ability for users to add reviews about an event. The plugin is also a bit hard to style. If you want to use a more advanced event calendar plugin on your website, you should take a look at the WordPress event calendar plugins on CodeCanyon.


Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)