VJ Tools Support

Installation

VJ Calendar is installed using standard Joomla! installation procedure in Joomla! back-end: Extensions -> Extension Manager -> Upload Package File.

VJ Calendar component, VJ Calendar module and VJ Calendar: upcoming events module module are installed.

VJ Calendar component is used to manage calendars, events and show them on front-end. It be configured in Components -> VJ Calendar.
VJ Calendar module is used to show events (created in component) in module positions and articles. It can be configured in Extensions -> Module Manager -> VJ Calendar.
VJ Calendar: upcoming events module is used to display upcoming events for appropriate calendar. It can be configured in Extensions -> Module Manager -> VJ Calendar: upcoming events.

Usage

List of calendars

To view calendars go to Components -> VJ Calendar -> Calendars. The view displays available calendars, it's possible to create new calendar, remove or edit existing calendars.
Links in appropriate columns will take admin to edit appropriate calendar or view it on front-end.

It's also possible to create calendar from articles, K2, Zoo or SQL query from this view by clicking appropriate button.
When creating calendar from article, K2 or Zoo category, it's necessary to choose appropriate category.
When creating calendar from SQL query, it's necessary to use query like: SELECT column1 as title, column2 as description, column3 as start FROM #__table;
where column1, column2, column3 as columns that represent title, description, start date of event accordingly.

Add/edit calendar

By clicking New button admin will be taken to the page to add new calendar.
If calendar is published it can be displayed on front-end.
Access specifies who can view the calendar on front-end. Public - everyone. Registered - only logged in users. Special - users with special access rights like administrator.
Access (for hidden event titles) specifies who can view full event titles on front-end. Public - everyone. Registered - only logged in users. Special - users with special access rights like administrator. Users that do not belong to specified user group will see 'busy' word instead of event title (this word is specified in Components -> VJ Calendar -> Settings).
Show week number option allows to show/hide week number.
Day of week specifies the day to be displayed first in a week.
Time Format allows to indicate the format of how time will be displayed for events that have it specified. Brackets indicate that the value inside brackets will be displayed if it's not equal to zero.
Title Format allows to indicate the format of time and title on day, week, month views. Example: MMMM YYYY,MMM D YYYY,MMMM D YYYY,ddd M/D,HH:mm. First goes for month view, second for week view, third for day view and Google calendar event page, forth for column on week view, fifth for left axis of week view.
Timezone allows to specify the timezone to show Google Calendar events in. Possible values: EMPTY (no value) - render all events consistently across all client computers, regardless of timezone; local - render events differently depending on the local timezone of each end-user's computer; UTC - events to be displayed in UTC (Coordinated Universal Time); strings like America/Chicago - display events in specified timezone


Google Calendar Support

PUBLIC GOOGLE CALENDARS

Google Calendar Link - if specified, events from Google calendar will be displayed for this calendar. It's possible to specify many Google calendar links using comma like link1,link2,link3.

Google calendar Link should be in format (Google Calendar API v3 requires to use API Key): https://www.googleapis.com/calendar/v3/calendars/CalendarID/events?key=KEY

CalendarID - the ID of the calendar (usually this is an email associated with Google Calendar)
KEY - API key. Obtain yours in Google Developer console or use our key: AIzaSyA35Ck0U45LtWx3JSxA_tjyqzZPvc7MAs0

How to obtain the key:

• Go to Google Developers Console (https://console.developers.google.com)
• Create new Project
• Enable Calendar API
• Set up an access key for browser apps in the Credentials setting
• Use generated key

How to find CalendarID associated with my Google Calendar:

• Go to calendar.google.com -> Settings -> Calendars -> Your Calendar
• Make sure the calendar has been set to "Public" under "Share this Calendar"
• Copying the URL of XML icon.
  

For the time being it's possible to use vjtools key: https://www.googleapis.com/calendar/v3/calendars/CalendarID/events?key=AIzaSyA35Ck0U45LtWx3JSxA_tjyqzZPvc7MAs0

PRIVATE GOOGLE CALENDARS

To use Private Google Calendar it's needed to specify Service Account Name, Key File Name, Calendar Name in Components -> VJ Calendar -> Calendars -> Your Calendar and switch radio box to Private. The process needs to be done once, please feel free to contact us for support. The steps may be complicated for unexperienced user. If you don't want to go through the steps, please indicate:

• Service Account Name: 650539657364-pattct7uvaob9dgc2qte6j4e3tjmqlgk@developer.gserviceaccount.com
• Key File Name: My Project-bb5e42271dae.p12
• Calendar Name: Your calendar ID/name
• Share calendar for 650539657364-pattct7uvaob9dgc2qte6j4e3tjmqlgk@developer.gserviceaccount.com email
  For those who would like to use their own Service Account Name and do not share their calendar for our email, please see below.
  Google Developer Console should be used to find necessary values.
  
  Steps:
• In Google Developer Console select your project (create new if there no projects)
• Select API's & Auth
• Select Credentials
• Select Create New Client ID and choose Service Account
• You will be prompted to save the private key for the id. Make sure you do save it since it can't be downloaded later (although you can generate new keys)
• Copy Client ID and Email Address in the next steps
• Place downloaded file to JOOMLA_DIR/components/com_vjcalendar/private folder. JOOMLA_DIR is the folder where Joomla! is installed
• Specify Service Account Name, Key File Name, Calendar Name and switch radio box to Private in Components -> VJ Calendar -> Calendars -> Your Calendar
  
  The last step is to share the calendar. Steps:
• Log in to the Calendar using the normal web GUI
• Locate the calendar on the left panel under My Calendars, hover over it to reveal the dropdown arrow, then select Share this Calendar
• Under the Share with specific people section, enter the Email Address from the previous step and check it has enough access for your intended use.- usually this that means See all event details
• Then click Add Person, then Save.
  
• 

If Google Calendar Link is not specified then calendar will display events created in Components -> VJ Calendar -> Events and assigned to it.

List of events

To view events go to Components -> VJ Calendar -> Events. The view displays available events, it's possible to create, edit, copy, delete events.

Add/edit event

If event is published it can be displayed on front-end in a calendar it belongs to.
Calendar indicates what calendar the events belongs to.
If only Start Date is indicated then event is considered as one-day event. If End Date is indicated as well then event lasts for several days. If event start date is Spetember, 1 and end date is September, 5 and no time is indicated then the event will be displayed on front-end on the days: September 1, 2, 3 and 4 (i. e. will be considered to end on September, 5 00:00:00). Date selector allows to indicate date only. To indicate event time click the start or end date field, select date in date selector, then press space and indicate time like: 2014/09/22 15:00:00 OR 2014-09-22 15:00:00.
CSS Class allows to assign CSS class name to be applied to this event to style and change color of event.
URL allows to assign the link to event to bring user to when event title is clicked on front-end. It's also possible to select article or K2 item or Zoo item to assign to event.
Recurring event lets make the event repeat each number of days or on specific day of week, etc. Period Start and Period Date can limit the period the events is repeats within.

Calendar Groups

Calendar groups allow to combine multiple calendars to show their events in a single view on front-end.
Link column brings user to appropriate calendar group view on front-end.

Only non-Google calendars can be combined into calendar groups. If you need to display multiple Google calendars in a single view, please indicate 'Google Calendar Link' field value as comma-separated list: link1,link2,link3. Events in each calendar will have their own CSS classes assigned: google1,google2,google3

Settings

View all events, Today(,month,week,day,busy,weeknumber,all-day), Month Names, Month Abbreviations, Day Names, Day Abbreviations, 'Not Published' text, 'No Permissions' text, 'No Published Calendars' textfields allow to internationalize text strings displayed on front-end.
Display Description indicates whether to display calendar description on front-end or not.
JQuery No Conflict setting will call jQuery.noConflict() javascript function on front-end to avoid conflicts with other scripts on the page.
Custom Javascript can run indicated JS code on front-end.
Allow registered users to add events on front-end - if turned on, logged in user can add events on front-end using link like index.php?option=com_vjcalendar&task=add.

Calendar view on front-end

Front-end allows to display list of published calendars using link like: index.php?option=com_vjcalendar. Link to view single calendar can be: index.php?option=com_vjcalendar&calendarid=1 where 1 is the ID of the calendar. Calendar will be displayed using theme chosen during calendar creation/edit.
Link like index.php?option=com_vjcalendar&calendargroupid=1 will display calendar group with ID = 1. It's also possible to assign specific calendar view to menu item by choosing appropriate menu item type.

If appropriate setting is enabled, logged in users can add events to calendars on front-end using URL like index.php?option=com_vjcalendar&task=add.

VJ Calendar module

Module can be configured in Extensions -> Module Manager -> VJ Calendar. It can be displayed in specified module position on specified pages. Module Class Suffix indicates specifies CSS class to be applied to this module instance.
Show: calendar or group indicates whether to display events from single calendar or calendar group.
Calendar and Or Calendar Group drop-downs are used to choose calendar or calendar group to show events from.
Default month, Default year allow to specify month and year to show in calendar by default.
Calendar type - skin of calendar module.
Calendar width, Calendar height - width and heigh of the module in its parent container.
Events For text - text to display before event date on event detailed view in the module.
Use padding for calendar - use padding or not.
Position in Details tab allows to set module position to render module in. To place the module in an article assign some unique position to it like pos1, publish module and assign it to all pages. Then place {loadposition pos1} code into article to show the module in it.

Module will be rendered in specified position on specified pages using chosen module type (theme).

VJ Calendar: upcoming events module

Module can be configured in Extensions -> Module Manager -> VJ Calendar: upcoming events. It can be displayed in specified module position on specified pages. 

Module Class Suffix indicates specifies CSS class to be applied to this module instance.
Calendar drop-down is used to choosen calendar to show events from.
Number of events specifies the number of events to display.
Date format - format for date.
Filter allows to specify one or more (comma-separated) words to show events that contain these words in their titles.
Show time - show time for events or not.

Module will be rendered in specified position on specified pages using chosen calendar, number of events and date format.

Time formats for calendar component