From Elxis Official Documentation

Event Calendar for Elxis CMS 2008.x and 2009.x+ (component)

The Event Calendar (component) is an event management and publishing system by Apostolos Koutsoulelos. It lets you store events, which are displayed to the end-users through a table similar to a desktop calendar. It supports repeating events, as well as day, week and month display.

Month view

Event view

Category view

Instructions

Administration

Configuration

To see the configuration panel of Event Calendar (component) hit Components tab in top navigation bar and select "Event Calendar" then "Configuration".

General Tab

In General Tab you can change these options:

 Default View: The default view of the celendaer [Month | Week | Day]

 Who can post events: Set which user can post new events through the front-end

 Who can edit events: Set which user can edit new events through the front-end

Date Format Tab

In Date Format Tab you can change these options:

 Starting day of week: Select the starting day of the week for month and week view

Display Tab

In Display Tab you can change these options:

 Display week-numbers: Select if the week number will be displayed

 Display week-numbers as links: Select if the week number will be an active link to week view

 Display navigation: Select if a navigation manu will be displayed on top of the component

 Display categories: Select if the event categories will be displayed at the end of the component

 Category columns number: Select the number of columns for category display

 Component Template: Select the component template

Timetable Tab

In Timetable Tab you can change add or delete timetables. Timetables are the time width of the calendar, e.g. the first and last hour that it will display.

To add a timetable set the starting time in Starting time of block and the ending time in Ending time of block in HH:MM format and click the "Add" button to see it on the left listbox.

To delete a timetable select it from the left listbox and click the "Delete" button.

To select a timetablw by just clicking it on the left listbox.

Managing event categories

Organising your events into categories helps you manage your events in a user-frendly way. Create as many categories as you wish and then add event to them.

Add Event Category

To add event categories hit Components tab in top navigation bar and select "Event Calendar" then "Manage Event Categories".

There you will see our familiar button "new" to the upper right corner of the page, press "new" and a page will open.

Then you have to fill all fields:
1. Give a Title to the new category.
2. Give a Name to the new category.
3. Suggest a SEO title by pressing the "suggested seo title" link under title-input fields.

All above fields are mandatory to create a new event category. As in case of other categories either have options for language, user access level.. etc. Again elxis is able to create the category and use default options for those secondary non mandatory fields. If you want you can modify now or any time in the future by following the above steps.

The categories have their own colors which can be changed when editing events (see later on).

Finally save category by pressing "save" button at upper right corner in category manager page.

Delete Event Category

To delete event categories hit Components tab in top navigation bar and select "Event Calendar" then "Manage Event Categories".

Select form the list the categories you wish to delete and press "delete" button at upper right corner in category manager page.

Managing events

Add Event

To add an event hit Components tab in top navigation bar and select "Event Calendar" then "Manage Events".

There you will see our familiar button "new" to the upper right corner of the page, press "new" and a page will open.

Then you have to fill all fields:
1. Select the category of the event. From here you can set the color of the selected category.
2. Give a Title to the new event.
3. Suggest a SEO title by pressing the "suggested seo title" link under title-input fields.
4. Set when the event starts in YYYY-MM-DD HH:MM:SS format. There is a small timetable to help you input the date.
4. Set when the event ends in YYYY-MM-DD HH:MM:SS format. There is a small timetable to help you input the date.
5. Set whether the event is pubished (default is no).
6. Give a small description of the event.
7. Set whether the event is pubished (default is no).

If you want you can modify now or any time in the future by following the above steps.

At the right side of the page(pic-C) you can see three tabs:

Repeating Options: Set the periodicity of the event [Every day | Once a week | Once a month | Once a year] and then select the exact date.
Exceptions: Set dates that should be excepted from the above set periodicity.
Contact information: Set the contact details for the event.

Finally save event by pressing "save" button at upper right corner in category manager page.

Delete Event

To delete an event hit Components tab in top navigation bar and select "Event Calendar" then "Manage Events".

Select form the list the event you wish to delete and press "delete" button at upper right corner in category manager page.

Approve Event

User commited events are not immediately published, rather they are subject to administrators' approval.

Unapproved events' state (Column "Published") displays an icon showing a calendar with a clock. To approve an event just click the state icon to turn into published.

Front-end

Private front-end

If you have the rights to add or edit an event, two more option will be available to you at the top of the component "add" and "edit". Click on any of those two options and you will be redirected to the edit page of Event Calendar. Then, just follow the instructions given above for the back-end to edit or add an event, as the interface is alike.

Please do have in mind that user commited events are subjects to administrators' approval.

Working with templates

The Event Calnedar (component) is very flexible, as it lets you create and use your own template that suits better your site! In this part we will see the structure of the template and the specific CSS classes that Event Calendar (component) works with.

Template folder and files

Inside folder /components/com_eventcalendar/templates/ is where component templates are stored.

Event Calendar (component) templates use a specific file structure. As an example we will see how the default template files are deployed:

default.css - templates css file
f_default.css/ - templates images/file folder
f_default.css/edit.png
f_default.css/new.png
f_default.css/view_day.png
f_default.css/view_day_f2.png
f_default.css/view_week.png
f_default.css/view_week_f2.png
f_default.css/view_month.png
f_default.css/view_month_f2.png

What the component does when looking for templates, is to search for css files inside component template folder and then get the images from the corresponding folder. That way, you avoid writing xml template files, saving time when building your site or while the component is loading (as no time nor resources for reading xml files are spend).

NOTE: The folder that stores template images is named after the templates css file name by adding the "f_" prefix,
otherwise the template will not work!

Images

The above-mentioned images are the minimum ones that an Event Calendar (component) template needs to fit properly. These images are:

new.png

edit.png

view_day.png

view_day_f2.png

view_week.png

view_week_f2.png

view_month.png

view_month_f2.png

PLEASE NOTE: When creating a template for Event Calendar (component) you should name your custom images as above,
or the component will not function properly.

CSS classes

Here is the list of the main CSS classes Event Calendar (component) uses with a short description:

Class	Description
Header
.event_calendar_header_table	Controls the header table
.event_calendar_header_table td.edit	Controls the private front-end option
.event_calendar_header_table td.nav	Controls the view navigation option (day, week and month view)
.event_calendar_header_table img	Controls the images displayed at component header
Month View
.event_calendar_month_table	Controls the month view calendar table
.event_calendar_month_table td.nav_other_month	Controls the month navigation bar for next and last month
.event_calendar_month_table td.nav_cur_month	Controls the month navigation bar for current month
.event_calendar_month_table td.weekdays_name	Controls the month week days name display
.event_calendar_month_table td.weekdays_name_sunday	Controls the month Sunday name display
.event_calendar_month_table td.week_nrs	Controls the week number
.event_calendar_month_table td.other_month_day	Controls the calendar days for next and last month
.event_calendar_month_table td.month_day	Controls the calendar days for current month
.event_calendar_month_table td.month_day_today	Controls the calendar today
Week View
.event_calendar_week_table	Controls the week view calendar table
.event_calendar_week_table td.nav_other_week,	Controls the calendar week navigation for next and last week
.event_calendar_week_table td.nav_cur_week	Controls the calendar week navigation for current week
.event_calendar_week_table td.weekdays_name	Controls the week days name display
.event_calendar_week_table td.weekdays_name_sunday	Controls the Sunday display
.event_calendar_week_table td.week_nrs	Controls the current week number
.event_calendar_week_table td.week_hour	Controls the timetable
.event_calendar_week_table td.week_day	Controls the calendar day
.event_calendar_week_table td.week_day_today	Controls the calendar today
.event_calendar_week_table div.event	Controls the calendar event display
Day View
.event_calendar_day_table	Controls the day view calendar table
.event_calendar_day_table td.nav_other_day	Controls the day navigation for next and last day
.event_calendar_day_table td.nav_cur_day	Controls the day navigation for current day
.event_calendar_day_table td.day_hour	Controls the timetable
.event_calendar_day_table td.day	Controls the calendar day display
.event_calendar_day_table div.event	Controls the calendar event display
Event View
.event_calendar_event_table	Controls the event view calendar table
.event_calendar_event_table td.title	Controls the event title
.event_calendar_event_table td.description	Controls the event description
.event_calendar_event_table td.contact	Controls the event contact
Category View
.event_calendar_categories_table	Controls the category view calendar table
.event_calendar_categories_table div.categories	Controls the event categories
.event_calendar_categories_table li	Controls the event category list
.event_calendar_categories_table td.events	Controls the category events
.event_calendar_categories_table td.description	Controls the event category description
Footer
.event_calendar_footer_table	Controls the calendar footer display
.event_calendar_footer_table td	Controls the footer
.event_calendar_footer_table div.event	Controls the footer categories
.event_calendar_footer_table td.all_events	Controls the footer all categories

Installing a template

After finishing your template, use any ftp client and upload template files (template.css and f_template.css folder with its images) inside the components template folder (/components/com_eventcalendar/templates). Event Calendar (component) should automatically see your uploaded template and make it available through its Configuration pages.

NOTE: Next releases will support uploading through component Configuration pages,
in order to avoid the use of an external ftp client.

Credits

@based on	Kay Messerschmidt <kay_messers@web.de>
		http://forge.joomla.org/sf/projects/eventcal

Changelog

version 0.1 (2009/05/31):

 initial release

Todo

* optimize code
* add uploading support for templates
* add printing capabilities

Event Calendar (component)