8.2 Add an Events Calendar

When I opened my first store, we used a series of free weekly informational classes to build a base of loyal customers. These classes were set up months in advance. Today, an online store can use free Jitsi video conferencing to offer online informational classes. We can use Breezing Forms to create Event Registration forms and Phoca Cart to pay for Paid Events and a free Joomla tool called BW Postman to send out email newsletters promoting the events. But we still need an Events calendar to display our events on our website. In this article, we will install and configure the most popular Joomla Events Calendar Extension called Jevents. Download Jevents from this link.

https://extensions.joomla.org/extensions/extension/calendars-a-events/events/jevents/

Then transfer it from your downloads folder to your website extensions folder. If you are developing your online store on a local server, because the extension is more than 2 MB, you need to install it by copying an unzipped version of the folder to your website temp folder. Here is the magic code to run in the terminal to change the permissions of this folder before installing it:

sudo chown -Rv www-data:www-data /var/www/html/Joomla3/tmp/pkg_jevents_3.6.13

Note: change the name of the website to the name of your website folder and the name of J Events to your version of J Events. Then install the extension with Extensions, Manage, Install, Install from Folder. If you have a real website, install it with the normal Joomla installation process.

01

The first step in using Jevents is to review the basic configurations. You can reach these options by clicking on Components, Jevents. The first time you do this it will open in the Configuration Page. Thereafter, it will open in the Jevents Control Panel:

02

Click on Configurations. There are three options. Basic, Intermediate and Advanced.

03

Clicking on the Intermediate or Advanced options will show more areas in the Component you can customize and also reveal more items in the side menu. Here is the Basic Side Menu:

04

The Intermediate Side Menu adds RSS configuration and Jevents Plugin Options. The Advanced Side Menu adds Module Configuration and SEF Options. We will use the Intermediate Option.

Component Configuration

Choose Jevents theme: Jevents Free version comes with 5 themes/ Flat, Alternative, Default, Ext and Geraint. For now, we will leave it at Flat until after we have created some events. Then we will try all of the themes to see which theme we like best.

Date Format. Change from French to US.

Show Headline: Default is component name which is JEvents. Change this to Menu Entry which may let us give the Headline our own name. Alternately, we can also turn off the Headline.

Navigation Bar to Use: Default is Navigation Icons. We may later turn this off or change it to a drop down list (old style). For now, leave it at the default setting.

Navigation icons to show: There are six options. Default is List by Category. Leave these at initial values until after some events have been created. Then change to see effect. The views are also controlled by various menu item options. To see the menu item options, click on the Main Menu and select a new menu item. Then click on Menu Item Type. Then click on Jevents Core. There are 10 menu item types we can choose:

05

Close this screen and return to the Component Configuration screen.

First year to display: Default is minus 2 which will go back 2 years. Change this to -1.

Last year to display: Default is plus 5. Change this to plus 1.

First day: Default is Monday. Leave it for Monday.

Show Author: Default is yes. Change this to No.

Click Save. Then click on Event Editing in the Side Menu

Event Editing Tab Configuration

Use 12hr time Format: Leave this set for Yes.

Event editing date format: Default is Y-m-d. Change this to m-d-Y.

Hide Specific Buttons: Leave pagebreak hidden, but delete readmore so that this button is shown.

New event notification message: For now, leave this at the default which is shown below:

06

Click Save. Then click on Events Detail View in the side menu.

Events Detail View Configuration Changes

Show Hits: change from Yes to No.

Change Display Creators: from Username to Name.

Change Redirect View with 1 Event: from No to Yes.

Menu Item for ALL event detail links: Leave blank for now. But we may eventually create a special menu item for events and link Event Details to this new page after it is created.

Then click Save and click on Main Monthly Calendar.

Main Monthly Calendar Configuration Changes

Here you can hide the Monthly calendar tool tip if you want.

Title Length increase the number of characters from 15 to 30.

Maximum number of events per day. Default is 15 events per day. We will lower this to 5 to force all other events into a tool tip and thus preserve the monthly calendar layout.

Click Save. Then click the Year Category Range side menu item.

Year Category Range Configuration

No of Events: Increase from 10 to 20 events per page.

Show Past events: For now, we will leave this at Yes.

Then click Save. Then click RSS in the side menu. For RSS Description, change from Powered by Jevents to the name of your website or calendar for example, My Calendar of Coming Events.

Then click Save and Close.

Support Info warning asks us to raise our PHP variables from 1000 to 2000 if we have problems with changing our configuration options. We will leave it at 1000 for now.

After setting our Configurations to their initial settings, we will return to the Jevents Control Panel. The three main icons are Manage Calendars, Manage Events and Manage Categories.

07

Click on Manage Calendars.

There is one calendar called Default. We could add more calendars which would be viewable in different menu items by different groups. For example, we could have one calendar for students and another for mentors. But for now, we will keep all of our events on the same calendar. We could also change the name of the calendar from Default to something else. But for now, we will leave the name at Default. Return to the Control Panel in the side menu. Then click on Manage Categories.

08

There is one category called Default. We will create several more categories so that when we create events, they can be placed in different color coded categories on our monthly calendar. Each category can also have its own image and its own description. Click New. Then give your category a name like Informational Courses, Mentor Meetings or Fundraising Events. Give your category a a title and description.

09

Note that you can change the Access level for any category from Public to Registered if you have events you only want registered users to see. Click on the Options tab to add an image and or a color. Then click Save and New to create another category. Finally, unpublish the Default category. Once you have some categories, click on Manage Events in the side menu.

10

There are no events created yet. Click New to create your first event. Give it a Title and a short description: This class will repeat every Wednesday for four weeks.

Note that we can add a small image to the description if we want. But the image should be 500 pixels wide or less. Then click on the Calendar Tab.

11

Put in the start date and time and an end date and time. If it is a weekly recurring event, click Weekly. Then check Repeat Until and put in the end date. Then click Save and Close. Alternately, if you want to have different subjects for each week, leave it set for No Repeat. Then click Save and Close. Then select the One Time Event and click Copy and Edit to make the second event which is only slightly different from the first. Change the title and the description and the date. Then click Save and Close.

Create a Coming Events Menu Item
Now that we have some events, we will create a menu item so we can view them in a monthly category. Click on Menus, Main Menu, Add New Menu Item. Then click the Blue Select button. Then click Jevents. List by Category. Call the Menu Item Coming Events. Then click Save and Close. By default, it displays the list by year.

12

Click on By Month to see the Monthly calendar.

13

Hover over the first event to see the popup. Then click on the event to go to the Event Detail Page:

14

Try the different themes. Here is Alternative

15

Here is EXT:

16

Geraint and Default are not that good. We will stay with the Flat Theme.

Customize the Appearance of the Flat Theme
To change the highlight color in the Flat theme, click on the Jevents Custom CSS and add the following:

.jev_toprow div.previousmonth, .jev_toprow div.nextmonth {

background-color: #3333ff;

border: 1px solid #3333ff;}

#jevents_body .nav-items div.active a, .jev_header2 .active a {

background-color: #3333ff;

color: #FFF;}

#jevents_body .nav-items > div a:hover {

border-left: 1px solid #ff3b30;}

To increase the event font size in the calendar, add:

#jevents_body a.cal_titlelink:link, #jevents_body a.cal_titlelink:visited, #jevents_body a.cal_titlelink:hover {

font-size: 12px;

line-height: 14px;

font-weight: normal;

color: #222222;}

To increase the left border thickness, change the border width from 4 px to 8px:

#jevents_body .jev_listview .jev_listrow li {

background: none;

background-image: none;

padding-left: 10px;

margin: 3px 10px;

margin-bottom: 3px;

border-style: solid;

border-width: 0px 0px 1px 8px !important;}

Then click Save and Close and view the result.

Add a Language Override
To eliminate the extra zero in front of single digit dates, we will create a language over ride. Click on Extensions, Languages Overrides. Then select the English Language. Then click New. Search for the Constant called DATE_FORMAT_LC2.

Change the value in the Text box to l, d F Y g:i

(Change the capital H to a lower case g).

17

The lower case “g” will replace double digit dates with single digit dates. Then click Save and Close and view the site to confirm that the double digit problem is gone. Note that this over-ride is needed because Joomla is using a wrong value. It is not really a problem caused by Jevents.

How to Post an Event to your Website Events Calendar

Here is an example yearly list of events.

18

Here is an example monthly calendar of events:

19

Note that color coded categories are shown at the bottom of the monthly calendar. Here is an example weekly list of events:

20

Here is the daily view of events. If there is only one event during a week or day, the Event Details page is shown which may or may not have a picture and detailed description of the event:

21

If Needed, Add a New Category to the Events Category Section
In addition to events being shown by year, month, week or day, they can be sorted by categories such as Student Lessons, Mentor Meetings, etc. Before posting articles or events, we need to create category folders on our Home computer and on our website. We have already created some categories but you can always create more.

Here are the initial six Event categories I created in the website images folder on my home computer:

22

Note that all six of these categories are inside of an events folder which is inside of our website images folder.

Assign a Color and Description to your new Event Category
Each event category should be given a color and a general description. Here are the colors and descriptions for our first 6 categories.

Category Colors
The events are color coded using the following colors:

Student Lessons #3a32d1 (blue)
Mentor Meetings #c935cc (purple)
Fundraising Events #1f9c36 (green)
Board Meetings #f1911c (save orange)
Community Events #ff0000 (red)
Training #613311 (save brown)

Detail General Descriptions
Our student lessons are Mondays and Wednesday afternoons from 3 to 4:30 pm.

Our Kids Biz Club mentor meetings are on Sundays from 3 to 5 pm.

Fundraising events are held periodically throughout the year.

Board meetings are held once a month.

Training events are held throughout the year.

We participate in local community events several times a year.

Each Event Category should also have a Category Image and Event Detail Image
The category images end with an S such as board-meetings while the event detail images are singular such as board-meeting.

23

Note that all image names are lower case with no spaces and all images have been optimized or compressed for the web to be less than 100KB. These images are then loaded to the Media Manager Events images folder on our website.

How to Create a New Category
Log in to the Joomla Administrator back end and click on Components, Jevents in the top menu. Click on Manage Categories

24

Click on the NEW button in the upper left corner. Then give your new Category a Title and a Description and place the category image below the description. Set the dimensions of the image to be less that 500px wide.

25

Then click on the Options tab and choose the color you want to associate with this category. Then click Save and Close. Here is the result of a category selected in the Yearly events list with a category description and a category image:

26

Note that the category drop down list shown in the above image does not seem to displayed by the Firefox browser, but it is shown as a drop down in the Chromium browser.

Creating a New Event for an existing Event category
Assuming that you are posting to a category that has already been created, posting an event to your website is very similar to posting an article. Here is a summary of the steps we use to post an article:

#1 Use Libre Writer to create your website articles.

#2 Name your Document and place it in correct category in your File Manager Articles Folder

#3 Seek out or create images and alternate images with text.

#4 Compress All Images

#5 Create a text only copy of your Writer Article

#6 Create a Folder with your File Manager for your Article Images

#7 Save each image to the images folder.

#8 Log into your Joomla website and create an identical images folder for your article in the Joomla Media Manager

#9 Add Images to their Folder in the Media Manager

#10 Post the Text Only Version of Your Article with the Joomla Article Manager

#11... Save the Text Only Version of your Article.

#12... Re-insert Images into Web Article

#13… Delete the extra spaces between images and paragraphs

#14 Create a Menu Item for your New Article

#15 Assign your Article Menu Item to the correct category

Creating and Posting Events

The good news is that you will not need to create a menu item for your event because events are simply posted to the calendar of events which have links to special Event Details pages. So you can skip steps 14 and 15 above. So let’s review the other steps for how to create and post events.

#1 Use Libre Writer to create your website event articles.

As we noted before, for security reasons, it is best to create events on a Linux computer and using Libre Writer. But you do not need to create a long article with lots of images. Just a short article with one or two images will do. In fact, you can create an Event template and repeat this with just different dates if you have similar events. To speed this process up, we will use the same general descriptions for our event details page as we use for our events category pages. We will however use different images for our single event than for our event categories.

Since we are using a template instead of a detailed event article, we can skip steps 3, 4, 5, 6, and 7 below.

#2 Name your Document and place it in correct category in your File Manager Articles Folder

#3 Seek out or create images and alternate images with text.

#4 Compress All Images

#5 Create a text only copy of your Writer Article

#6 Create a Folder with your File Manager for your Article Images

#7 Save each image to the images folder.

Since we have already saved the Event Detail images to our website images folder, we can also skip Steps 8 and 9.

#8 Log into your Joomla website and create an identical images folder for your article in the Joomla Media Manager

#9 Add Images to their Folder in the Media Manager

#10 Post the Text Only Version of Your Article with the Joomla Article Manager
Log in to the Joomla Administrator back end and click on Components, Jevents in the top menu. Then click on Manage Events which will take you to the Events screen:

27

Click on the green NEW button in the upper left corner. Then give your new Event a Title and assign the Event to a Category:

28

Note that by default, all events are open to the public. However, you can create categories of events and individual events that can only be seen by registered users – or even events that can only be seen by website administrators. Next scroll down the Event page and give your event a Description and place the Single Event image below the description. Set the dimensions of the image to be less that 500px wide.

29

#11... Save the Text Only Version of your Article.

#12... Re-insert Images into Web Article

#13… Delete the extra spaces between images and paragraphs

The above steps are already taken care of.

Additional Steps for our Event Detail page:
After we have our description and image, click on the Calendar tab.

30

Click on the Start date calendar icon and select the start date. It will automatically set the same date as the end date. Then type in the Start time and End time and click on the PM buttons. It is best to leave all events as “No Repeat” and just manually enter all events if there are several similar events. Then click SAVE and CLOSE. Then check the appearance of your event by clicking on the Events calendar and viewing the event.

Create an Event Registration Form
In the JEvents event description, you can link to either a Phoca Cart product page where a person can pay to attend an event – and/or link to a Breezing Forms Event Registration page where a person can sign up for an event so that you know how many people are coming. Also signing up for the event will give you the email address of the person so you can email them a link to the Jitsi video conference if it is an online event. Here we will make a general event registration form where a person can enter the name of the event, the date of the event, the time of the event and their email address where we can send more information about the event.

Click on Components, Breezing Forms, Manage Forms. Quick Mode Forms. We will copy the Contact Form. Then open it and change the Title to Event Registration form and change the Name to event_form. Then click Save and Save. Then delete the Message element. Then click Page 1. Then click Edit.

“Welcome to our Event Registration form. We use the same form for all of our events. As many of these events are online video conferences, we need your name and email address to invite you to the video conference. We also need you to let us know exactly which event you want to attend by filling in the information below. There is a box at the end of the form to ask any questions you may have about the event. We look forward to seeing you at the event! “

Then click on Page 1 again. Then click Section to add a new section. Change the type to field set. Change the title to Event Information. Then select this section and click Edit. Then type in the following:

“Please fill out the information below as completely as possible so that we can determine the exact event you would like to attend and provide you with the information you need for that event. “

Then click Save, Save and Save. Then click the Event Information field and click New Element. Call it Name of Event. Then another element called Event Date (using the responsive calendar) and a third element called Event Time.

Then a fourth element called Use this box to ask us any questions you have about the event.

Then add a Captcha element at the bottom of page 1 to reduce spam and make the name and date of the event required elements.

Change the Submit button name to Click Here to Register.

Then click Page 2 and click Edit to edit the Thank you for registering page.

Thank you for registering for this event! We will email you back a link to the video conference of this event shortly before the event occurs. If you asked us a question about the event, we will send you a separate email with an answer to your question.

Next, we will create a Hidden Menu and then menu item on our Hidden Menu to create a link to this form that we can place in the description section of all of our Event articles.

Here is the link to this page:

https://createyourownonlinestore.org/event-registration-form

Here is the event registration form:

31

To download the event registration form, click Configuration, Create a Package. Give the package a name and select the Event Registration form. Then click Continue. Then save the file. Then add it to Phoca Downloads files.

What’s Next?

In the next article, we will review how to add an email newsletter to help promote your free products and special events.