A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

A Complete Guide to the My Calendar WordPress Plugin

A Complete Guide to the My Calendar WordPress Plugin

If you’re in a business that includes organizing meetups, conferences, shows or events of any kind, you naturally want people to know about it. The best way to go about this is to put up a calendar on your site, with all the essential info. And if your business website is a WordPress-powered one, we have good news. There are some absolutely terrific calendar plugins you can use for this purpose. Today we’re going to talk about one of the most popular calendar plugins, the My Calendar plugin for WordPress.

The great thing about plugins is that they help you do a relatively complicated thing in a very, very simple way. My Calendar is an excellent event management tool that you can customize to fit your brand’s aesthetics. Plus, it’s built with accessibility in mind. This means it’s suitable for just about any kind of WordPress user.

My Calendar supports multiple calendars and works across all of your websites. You can arrange your events in lists or in grid, with a daily, weekly or monthly view. Also, you get to set up recurring events and post to Twitter when an event is created. Meanwhile, rich permissions allow you to restrict access to some parts of the calendar.

In short, My Calendar is extremely user-friendly and provides tremendous support for your event management needs.

In this article, you will find out the following:

First Steps with My Calendar Plugin

Let’s get started with our brief overview of this excellent calendar plugin for WordPress.

The first thing you’ll need to do, obviously, is install the plugin.

My Calendar Plugin

After you’ve installed and activated the plugin, you’ll notice three new things that appeared in your backend:

  • The My Calendar page appears in Pages
  • The My Calendar option appears in the Dashboard Menu
  • The Calendar Widget appears in your Widgets.

To access the My Calendar page, head over to your Pages:

My Calendar Page

Right now, it’s only a blank calendar. There are no Events, as we haven’t made any yet. A quick look at the default structure shows us that there is a header at the top. Here we can pick how we want to display our dates and we can also go directly to the desired date.

The calendar itself is not clickable, and below there’s the bottom navigation where we can select an event category. The Print option is also there. Note that, unless you change something, the default category for events is General.

My Calendar Structure

The plugin itself comes with several different calendar themes. Theme options can be found in the Style Editor settings. We have used the twentyeighteen.css style.

The My Calendar page can be treated like any other page in your backend. You can add other content to it as well – it doesn’t have to be just the calendar. What’s important to note here is that we have a calendar shortcode. This allows us to copy the calendar and use it on some other page. For instance, maybe you want your calendar to appear on your homepage or a separately built events page. Thanks to the shortcode, you can place the calendar anywhere you want.

Calendar Shortcode

How to Add Events

The best way to explain the way this calendar plugin for WordPress works is by using a concrete example. Let’s say, for instance, that your business involves a venue in which you’re organizing meetings, concerts, book club meetings, poetry slams, underground shows, theatre plays, stand-up shows, talks, whatever. You want people to come to these events so you want to let them know about them using your site, or, specifically, your events calendar.

To add an event, head over to My Calendar Add New Event.

Add Event

After creating your event, the first thing to do is to add a title. The title appears in the calendar as the first information about your event that your visitors will see, so obviously it is very important.

The next thing to add is the event description. For example, if you’re hosting an open-air concert, you want to let everyone know who’s playing, how many performers,  the opening act, the genre, and so on.

The third item here is the event category. We haven’t made any custom categories yet so the default one is General. Of course, you’ll need to change this because your event is a concert and it’s always a good idea to be specific.

Event Options

The next thing to add to your event is the date. The plugin allows you to set a specific date and time your event will take place. In case it’s a multi-date event, something that takes place for five days in a row, for example a theatre play, you won’t have to create five separate events. Instead, you just mark the first and the last day of the event.

It’s similar for a recurring event. For example, for a show that takes place each Friday for three consecutive weeks, you won’t have to make three separate events. Instead, you’ll just add a repetition pattern, specifying how many times it repeats and at which intervals (eg. Repeats 1 times, Every 3 weeks). Events can also repeat monthly or annually – whatever works for you.

Another great thing about the My Calendar plugin is that you can add an image to the event, and also a link, if your event is listed and described at some other online location.

Event Info

Here you can also add Event Access and Event Location, but more on that a bit later.

Event Access and Location

Once you’ve set everything, don’t forget to hit Publish.

And now our calendar has its first event! You’ll notice it’s yellow, and that the category General is also marked with yellow, because that’s your default category.

My Calendar

Clicking on the event opens a window with the additional information we have put in. There’s the information on time, the image and a description. Clicking on More information takes the visitor to the link you have provided and clicking on Read more opens the event is a separate page.

If you feel like you don’t need all this, you can change it in My Calendar Settings, where you also have the possibility of adding other information and content, such as maps.

Event More Info

Editing an existing event is also quite easy. Just head over to My Calendar > Manage Events.

Manage Events

Here you’ll find all your events. Just click on the one you want to edit and change what you need to change.

Also worth mentioning here is the Event Group option, located just next to Manage Events in your menu. This option allows you to change a feature or an attribute of a group of events. For example, if you want to change the category for 15 events, just check the ones you want, create a group and assign it a desired category that will apply to them all.

How to Add Categories

Let’s keep assuming you’re running a venue that organizes different kinds of events, for which you have already created one (a concert). For easier event management, it’s recommended to group them in categories, in this case – concerts. To do that, you need to add a “concert” category, and then later you can add others, for other kinds of events you’re hosting, like theatre plays, shows and so on.

Go to My Calendar > Manage Categories.

Add Categories

Now all you need to do is add a name and a color for your category. The color will be used for every event in your calendar that falls into this category.

Also, check any of the fields that match your event: Private category, Default category or Holiday category.

Furthermore, you can also edit your categories, change their titles and colors, as you will certainly do for the default (General) category.

Edit Category

We have changed the color and the title for your event, and now it looks like this:

Calendar

How to Add Location

As we already mentioned, we add the location by entering the specific Event, but before that you need to actually create a location and then apply it on the Event.

To do this, go to My Calendar > Manage Location > Add New.

Add Location

Here you’ll find all the fields required for properly defining a location, such as the Postal Code, city, Street, Country, etc. The name of the location is particularly important, as you will use it to call this specific information from the Event, using the name of the location. Only after we have successfully created a location we can actually add it to the Event. Of course, the same location will be used for all of your events taking place at the same venue.

New Location

Your event with an added location will now look like this:

Event with Location

Customizing the Calendar Style

My Calendar plugin by default creates a calendar in a certain style which you will most likely want to change. Fortunately, there are plenty of customization options here so you can experiment and make the calendar more fitting to your overall website style.

Go to My Calendar > Style Editor.

Calendar Style

Right here at the beginning you’ll find a CSS editor in which you can change some of the settings, but unless you are skilled in this sort of thing, this is better if left untouched.

Some basic customization options are offered below the CSS editor, in which you can pick the main colors for your calendar.

Color Options

You have a choice of six colors to pick from.

  • primary-dark: this color is used for the Monday to Sunday row, for all dates with an event, header typography and the calendar’s bottom navigation typography;
  • primary-light: used for names of the days of the week and for the fields with the date of the month, right now it’s white just like the field;
  • secondary-light: active navigation fields and current date;
  • secondary-dark: the current date field and other dates with no events;
  • highlight-dark: used for the month and the year above the table, as well as for the border around the current date field;
  • highlight-light: borders around all the navigation buttons and below the table, as well as borders of all the fields in the table.
Color Options

We changed the things around a bit so now our calendar looks like this:

Calendar with Changed Colorss

As we mentioned earlier, you have your choice of available themes you can use for your calendar. They are located right here, to the right of the Style editor screen. Each theme has its style settings that you can customize.

Style editor

Advanced Settings with CSS

Those among our readers who are somewhat adept around CSS should check out a trick or two in the advanced settings.

Button color

If you want, you can change the color of the navigation buttons. To access the color, locate the 74th line in the CSS code and change the .mc-main -mc_bottomnav a element:

Button Color

Linear gradient means that the background consists of two colors merging into one. Pick two colors and change the RGB values in the brackets. Pay attention here, the fourth digit in your bracket, the fraction one, represents opacity. If you want, you can change that one too.

If you want a single-color button background, pick your color and replace the entire line of code with: background:#XXXXXX;

In our example, it will look like this:

background: linear-gradient(to top, rgba(202, 149, 149, 0.95) 0%, rgba(208, 218, 142, 0.95) 70%);
Calendar Button Color

Button hover color

You can do a similar thing with the hover. You can replace the linear-gradient colors or make it a single-color one, as above. Or, you can delete the entire line of code if you don’t want your button to change color when hovered upon. The code line in question is 83.

Button Hover Color

Our example:

background: #8b182f;
Calendar Button Hover Color

Bottom navigation

No one says you have to keep the bottom navigation. If you don’t need it, you can actually remove it.

Bottom Navigation

To do this, just add this at the bottom of CSS:

.mc-main .mc_bottomnav {
display: none;}
Without Bottom Navigation

Or perhaps you want to keep the navigation but change the text settings? All it takes is a few lines of code.

Lines of Code

Find the 470th line of code and add the following:

margin: 17px 0 10px 0 !important;
font-weight: 600;
color: #8b182f;

You can set your own values, just make sure everything remains within the brackets { } so you don’t make a mistake.

Back to General CSS Settings

You can experiment with CSS. If you make a mistake, you can easily go back to general settings. Check Reset to Default and save your changes. Everything will go back to the way it was before you changed anything.

Reset Settings

My Calendar Widgets

After installing the My Calendar plugin, you will notice Calendar among your widgets as a new addition to the ones you’re already using.

It’s often a good idea to place the calendar in the sidebar or the footer of your WordPress website. This plugin allows you to do it the easy way, in addition to other useful things it can do.

With My Calendar, you have five different widget types available for your calendar.

Go to Appearance > Widgets.

My Calendar Widgets
  • Event filter allows your visitors to search events per specific criteria. This may include Locations, Categories or Accessibility Features.
  • Simple event search is very simple, as the term suggests. It allows your visitors to perform a simple event search.
Calendar Event Widgets
  • The Upcoming events widget is used to announce upcoming shows, plays, meetups or any other event you may want to organize. Here you can set the number of events to be displayed, the category, location and so on…
  • Mini calendar is another useful widget, which displays events based on certain criteria.
  • Today’s events displays the events on a given day. You can also set a custom text that will be displayed on days when there are no events.
Calendar Widgets

My Calendar Settings

The last thing we want to show you about this calendar plugin for WordPress are the My Calendar Settings. Here you can set the options for your calendar. To access them, go to My Calendar > Settings > Output tab.

My Calendar Settings

Here, for instance, you can rearrange or re-order calendar layout, in case you’re not happy with its current field structure.

You can also customize your Single Event, for example by adding a map. A map is always a great addition to any site simply because you want people to be able to find your venue easily.

It’s all very simple, just set some time aside to look around the widget in your backend and fix everything just the way you want.

Conclusion

We hope we managed to shine a little light on the excellent My Calendar plugin and its vast possibilities. As you can see from our examples above, the plugin is very user-friendly and doesn’t require you to have any particular knowledge in order to successfully manage your events.

Add this to the customization options and the fact it is a light plugin that won’t stress your site, and you get one of the best calendar plugins for WordPress on the market at the moment.

Boost your business, promote your venue and get more clients by adding a cool-looking, neat and functional calendar to your WordPress site.

We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Comments (20)

  • Tom

    Good article, I was searching for some help with CSS for this plugin. Could you help add the CSS code that makes the calendar popup appear above rather than below?
    I have the mini calendar in a footer widget but when you click on an event it opens below the footer and it doesn’t look right, Ive searched for the correct code but can’t get it correct

    reply
  • Miguel

    Hi Ana,

    Great article, a lot of useful information on what you can do with the plugin.

    I was wondering if you can help with a problem I ran into while using the plugin on a WordPress website that I’m developing locally.

    The plugin seems to be working fine apart from the Mini Calendar widget, which I’m using on the footer area of my website. My Mini Calendar is showing the month of January 2019 instead of the month we are currently in – do you have any idea how to make it display the current month?

    Thanks

    reply
      • Miguel

        Yep, that worked – I can’t believe it was that easy!

        Thank you for your help, much appreciated.

        reply
  • Miguel

    Hi Ana, that did solve the problem thanks again.

    However, I cannot see any of my events on the mini-calendar – have you ever encountered this problem while using the my calendar plugin?

    Thanks,
    Miguel

    reply
  • John

    Hi,
    Great article with easy to follow directions on what style are affected.
    One question I have actually pertains to a more backend change I think, but Ill ask if you or anyone knows. How can I have the List style view show everyday of the week and then be filled with an events on certain days.

    Thanks in Advance, John

    reply
  • Lele

    Hi.
    Is it possible to have more events on one day?
    And if it is possible, how do I do it?
    Because in the calender I created now, it will not show more events on one day..

    reply
  • cezi

    i am impressed by this calendar but there is one issue i can not solve: the calendar is hard to read because the background image of my theme (astra pro) shines through, the calendar looks like a transparent png file; the problem would be solved if i could assign a solid color background to the calendar but i don’t know how to realize this!

    help would be much appreciated!

    reply
  • cezi

    thanks for the response, meanwhile I solved the issue by placing the calendar in an elementary container and colour the background of it; I will keep your suggestion in mind!

    reply
  • Boban

    Hi, great article.
    I have one question – can i add a filter to search by event organizer? Thanks

    reply
  • Tico03

    Hi,

    How can i change day-heading mon ?

    Thanks,
    Tico

    reply
  • Susan Francona

    Is there a way to make the mini calendar smaller in size? I am currently using shortcode [my_calendar format=”mini”]. But the calendar looks too big.

    reply

Leave a Reply