Hosting Tutorial & Guide

How to Add a Joomla Event Calendar by Using JEvents

updated on Mar 31, 2015
How to Add a Joomla Event Calendar by Using JEvents Thanks to the great extensibility, the functionality of Joomla websites can be enriched as you want. You can add an event calendar, insert a shopping cart, make an image gallery, and so on. After discussing how to install or remove Joomla 3 template, this time we'd like to offer a simple but detailed tutorial about how to add an event calendar with the use of JEvents.

JEvents is the most popular Joomla calendar component that has powerful built-in features which assist users much in listing, managing and checking all kinds of events. Following the steps below, you can know more about the module and get a clear idea about how to integrate and use it for your own purpose.

Install JEvents on a Joomla 3 Site

The first necessary step is to install JEvents module. To accomplish this task, you have two things to do: to download the zip file of the module, and then to upload it to your Joomla site. Details are explained as below.

Download JEvents

Firstly, go to the Joomla extension page and click on the orange button saying "GET JEVENTS". Then, on the next screen, click on the link of "JEvents 3". Now here comes the download page for JEvents 3.2 and JEvents 3.1. For this tutorial, we'd like to download the latest version. Hit the download button and download the zip file to your PC.

Download JEvents

Upload and Install JEvents

When the download is finished, log into Joomla 3 admin panel with your username and password. In the main menu, find Extensions and click on Extension Manager. In the Install section, you can see a Choose File button and the Upload & Install option. Just select the zip file downloaded before and click on the upload button.

Upload JEvents

Waiting for a few seconds, you can see a new message telling that you have successfully installed the module.

JEvents Installed Successfully

Create a New Category

In the main menu of the Joomla admin panel, navigate to Components and click on JEvents, which will get you to the control panel of the component. For the first time of landing on the component control panel, you will need to make some general configuration. If you do not want to deal with them currently, just leave the settings to be the default value and click on the "Save and Close" button.

When the control panel appears, click on the "Manage Categories" tab. We discuss categories first instead of events because they will be used when creating an event. On the categories page, hit the green button saying "New" in the toolbar and you can get the following form.

JEvents Add a New Category

Now you need to finish the tasks listed below.
  1. Enter a title for the new category.
  2. Add a description for the category.
  3. Choose the parent (if there is any), configure the access level, and select the status to be "Published".
  4. If you want to give a specific color to the category, click on the "Options" tab and choose a color.
Choose a Color for Category

After clicking the "Save & Close" button, you can see the newly created category is listed on the categories page. If you want to create more categories, just repeat the actions you have done before.

JEvents Categories

Add a New Calendar

Clicking on the "Manage Calendars" option in the control panel leads to you to the calendars page which lists all available calendars. Creating a new one requires you to make use of the "New" button which presents several options.

JEvents Add a New Calendar

Now you can take the following steps to get a new calendar ready.
  1. Give the calendar a name by filling the box next to "Calendar Name".
  2. Select a default category from the drop-down list.
  3. Configure the access level if necessary.
  4. Make sure that you have selected "No" to "Is Default".
  5. Click on the "Create Calendar from scratch" button.
  6. Repeat the actions above to create more calendars.

JEvents Calendars

Add a New Event

After dealing with calendars, you now need to pay attention to events. Similarly, you can locate the events page in the control panel by clicking on "Manage Events". And then, choose to create a new event. Firstly, the form in the screenshot below requires to be filled.

JEvents Add a New Event

All of the options given in the form are easy-to-understand, and you can just make adjustments as your will. Below the description box, you may have to enter the location of the event and the contact information if they are needed.

If the event has specific start and end date, or you plan to repeat the event regularly, the "Calendar" tab provides you management tools.

Calendar Tab

Create Menu Items to Your Calendar to Display It

Now that you have created the content you want to display, you also have to find a way to display the event calendar in the frontend of your site to make it visible to the public. Just follow the steps below.

Step 1: Navigate to Menus > Main Menu, and click on "Add New Menu Item". This will get you to an add-new page.

JEvents Add a New Menu Item

Step 2: Enter a title for the new menu, and then, click on the "Select" button for "Menu Item Type". When the pop-up window appears, select "JEvents", and choose the menu that you want to display. For testing, we select "View by Month".

JEvents View by Month

Step 3: You can change other options like target window, menu location, parent item and template style as you like. If you do not have a clear idea about these options, that's OK. Just leave them and have a test on your current configuration.

JEvents New Menu Item Configuration

Click the "Save" or "Save & Close" button. If everything is right, this message will appear.

JEvents New Menu Item Created Successfully

The event calendar must be displayed on your Joomla site properly now, and you can have a careful check on it. Of course, if you need a quick way to make adjustments to some basic parts of the calendar, you can go back to Components > JEvents > Configuration to choose the layout view, customize the background, change the data format, etc.

JEvents Event Calendar Preview