1. Home
  2. Docs
  3. Happy Elementor Addons Fr...
  4. Widgets
  5. Events Calendar

Events Calendar

Happy Addons introduces Events Calendar widget for users to add Calendar on webpages only following some easy steps. However, the entire process is comparatively easy but needs your full concentration!

And this feature of Happy Addons includes three types of calendars. For example, manual calendar, google calendar, events calendar.

So let’s see how to use this widget on your WordPress site. Let’s get started.

How To Use The Events Calendar

Step One:

To use the Events Calendar on your WordPress site, select the widget from the left-sidebar and drag it to the canvas.

Adding the widget

After that you’ll get the initial details of Events calendar.

Events Calendar

Step Two:

In Events Calendar widget, you can use three types of calendar.

  • Manual calendar
  • Google Calendar
  • Events calendar
Types of calendar

Manual Calendar

The first calendar that you can use is – Manual calendar. It will come initially. So here is the basic configuration that you can do.

You can give a title to your Events, author name and location.

Manular calendar

Also, you can give an image, start & end date, etc.

screely 1613464717071

You can customize each event individually. To do that you have to toggle on the ‘Individual style‘ option. And then you can stylize each event.

more options of manual

So after customizing Manual events, you can preview it from here. To do that click on the event and see the preview.

Events Preview

Google Calendar

To use Google Calendar, you just need to select the Google Calendar from the dropdown menu.

google calendar

After selecting Google Calendar, you’ll be asked to insert API key & Calendar ID.

Here is guide to create Google API key.

screely 1613466059537

After adding the Google API keys & Calendar ID, the calendar will appear next to the screen. Also, you can set the start & end date along with number of events.

screely 1613470093739 1

Now click on the setting option, you’ll get many options to customize. For example, set the language, calendar default view, first day of the week, show event pop-up, all-day text, event day text, etc. And you can also add a wrapper link within the event.

screely 1613470942336

To know more about the Wrapper link, check out the documentation here.

Note: In order to be able to actually link my google calendar with the events calendar from HappyAddons, I had to publish the google calendar. Without it, it won’t fetch the calendars data. And will return the message to “enter a valid API key and calendar ID”

Events Calendar

Now click on the Events Calendar. Similarly, it will appear on the screen.

Events calendar

Now tap on the event calendar. And here you can set the event according to all events, category and selected events.

NB: Before using Events Calendar, you’ll need to install it. So if you haven’t installed it yet, here is the link to install the Events Calendar plugin.

Event item: You can set the event number to show many events that you want to show in the calendar.

screely 1613472492475

Note: Calendar settings are almost the same for all the calendar types. So you can set it same or keep it different.

Step Three:

When you click on the Style button, you’ll get four available options.

  • Calendar
  • Top bar
  • Events
  • Event popup

NB: These settings are almost same for all calendar types. So we’re showing the style section using Manual calendar.

So here you can change font size, background color, border color, box-shadow, today’s background, calendar heading, padding, etc.


Next slightly scroll down. And here you can change the font size, color, background, top bar font size, etc.

screely 1613478000909

To stylize the top-bar, tap on that section and you can change color, background color, spacing, typography, text color, section space, hover, etc.

screely 1613478297435

Next, we have the event section to stylize. Here you can similarly change the event’s font size, color, background color, and dot color.

screely 1613484018955

After your users click on your event, they will get an fresh new popup window. And you can also customize it.

To do that click on the event popup. Here you can resize it, add padding, margin, include a border, and border-radius, border type.

screely 1613485029740

Similarly, you can apply all the styles to every section of the popup. For example, metadata, description, read more, popup close button, etc.

Step Four:

There is also an Advanced option which is an elementor default option. There is a happy effect, motion effects, etc. if you want to add more functions to your widget and make it more fun and stylish.

screely 1613485559081

So here is the final preview of the Events calendar widgets of Happy addons.


That’s it!

How can we help?