The following are only a description on how to link to the calendar via an URL, or how to set up the calendar in an iframe, and/or calling the calendar with parameters. Furthermore You can see how to setup a minicalendar and/or a sidebar with upcoming events.
Adding the Calendar to an Existing Web Page
To use the calendar on an other web site, the following possibilities are available:
- link to the calendar's URL, which will open the calendar in a new page.
- Add an Upcoming Events Sidebar. This light-weight list shows all public events for the coming x days.
- embed a mini calendar, which can be used to view events and - if enabled by the admin - add, edit and delete events.
- embed the full calendar with navigation bar, which the visitor can use to change the options the calendar.
- embed one specific calendar view without navigation bar. The visitor cannot navigate to other views and cannot change the options of the calendar
Link to the Calendar
To link to the LuxCal calendar in an existing web page and open it in a new window, the following HTML code can be used:
<a href="http://www.mycalsite.xx/luxcal/" target="_blank">Go To My Calendar</a>
If you want to display a subset of the available events, see "Applying Filters to the Calendar" below.
Add a Sidebar with Upcoming Events or ToDo list
A sidebar with public upcoming events or a ToDo list for the coming x days can be added to your web page. The sidebar is placed in a <div>-tag container, can be placed at any location and is fully customizable. An example is shown on the LuxCal Demo page of the LuxSoft web site. The sidebar can be added to your web page by adding the following lines of code to the <head>-section of your web page:
<link rel="stylesheet" type="text/css" href="mycalendarfolder/css/css_sbar.php">
<script type="text/javascript" src="mycalendarfolder/common/toolbox.js"></script>
and adding the following lines of code to the body of your web page:
<?php
$sbClass = {sidebar class}; *
$sbCal = {calendar ID}; *
$sbContent = {sidebar content}; *
$sbHeader = {sidebar title}; *
$sbGroups = {list of user groups for which events to show}; *
$sbCats = {list of event categories to show}; *
$sbUsersIn = {list of users to include}; *
$sbUsersEx = {list of users to exclude}; *
$sbMaxNbr = {max. number of events to show}; *
$sbUpDays = {max. number of days to show}; *
$sbWeekDay = {week day for which events to show}; *
include './mycalendarfolder/lcsbar.php';
?>
* These parameters are optional and can be omitted. See explanation hereafter.
Explanation of the lines of code:
All parameters indicated by {....}, including the braces, are text strings between single or double quotes.
- <?php: start PHP and ?>: end PHP. If the lines of code are added to a PHP section, these PHP-tags can be omitted.
- $sbClass: This is the class of the container <div>-tag which is used in the CSS to define the style for the sidebar container. This line of code is optional and will default to 'sideBar'. The styles for 'sideBar' are defined in the file css/css_sbar.php of your calendar installation.
- $sbCal: This is the name of the calendar database file (without extension) to be used. If not specified, the default calendar from the lcconfig.php file will be taken.
- $sbContent: This variable defines the content of the sidebar. If its value is 'todo', the sidebar will show the ToDo list, which is a list with events requiring an action. In this case an interactive checkbox is displayed in front of each event which can be checked/unchecked by each visitor. This line of code is optional and when omitted the sidebar content will default to the upcoming events list.
- $sbHeader: The title of the sidebar. This line of code is optional. If not specified, the title of the sidebar will be taken from the language files.
- $sbGroups: This is a list with one or more user group ID numbers (see admin's User Group page) for which events should be included in the sidebar. The ID numbers should be separated by commas. This line of code is optional. If not specified, the events of all user groups will be included.
- $sbCats: This is a list with one or more event category ID numbers (see admin's Categories page) that should be included in the sidebar. Just the value 0 (zero) means 'show all event categories'. The ID numbers should be separated by commas. This line of code is optional. If not specified, all event categories will be included.
- $sbUsersIn: This is a list with one or more user ID numbers that should be included in the sidebar (for user IDs see admin's Users page). The ID numbers should be separated by commas. This line of code is optional. If not specified, the events of all users will be included.
- $sbUsersEx: Same as above, but for users to be excluded (for user IDs see admin's Users page). If $sbUsersIn is specified, $sbUsersEx will be ignored.
- $sbMaxNbr: Maximum number of events to show in the sidebar.
- $sbUpDays: Maximum number of day to show. If not specified, the number of "Days to look ahead in sidebar" from the admin's Settings page will be taken
- $sbWeekDay: The week day for which events should be shown. 1 = Monday, 2 = Tuesday, . . . 7 = Sunday. If specified, the $sbUpDays (see above) will automatically be set to 1. If not specified, events will be shown for all days of the week.
- include: At this place the sidebar code will be included.
In the above lines of code you should replace mycalendarfolder by the name of the root folder of your calendar installation.
The file css_sbar.php contains the default style for the sidebar container <div>, which should be tailored to your needs. In the same file you can customize the style, colors, fonts, etc. of the sidebar content. The title of the sidebar can be set per sidebar and the events in the sidebar can be filtered on the event sequence number and/or user ID. This allows for more than one sidebar per site, each with its own title and a different list of events.
Example of two sidebar definitions for the same website which are complementary:
<?php
$sbClass = 'sideBar1';
$sbHeader = 'Birthdays/Holidays';
$sbCats = '2,4';
include './mycalendarfolder/lcsbar.php';
?>
<?php
$sbClass = 'sideBar2';
$sbHeader = 'All other events';
$sbCats = '1,3,5';
$sbUpDays = '7';
include './mycalendarfolder/lcsbar.php';
?>
For each event the following will be displayed: date, time and title. Via the admin's Settings page, under "Stand-Alone Sidebar", you can choose whether further event details should be shown in a pop-up box (like in the full LuxCal calendar) when hovering an event and if URLs from the event description (if any) should be displayed in the sidebar as a hyperlink. On the same Settings page you can specify the number of days to look ahead for events in the sidebar.
The sidebar is using the database and tools of the full calendar and therefore the full calendar should be present in the "mycalendarfolder" (see code above).
Embed a Mini Calendar
A mini calendar with a (minimum) width of 160px can be embedded in your web site. An example is shown on the LuxCal Demo page of the LuxSoft web site. The mini calendar can be displayed in an inline frame (iframe) using the following HTML code:
<iframe id="lcmini" src="http://www.mysite.xx/luxcal/lcmini.php"></iframe>
If you want to display a subset of the available events, see "Applying Filters to the Calendar" below.
Via the CSS styles of your site, the id lcmini can be used to position and define the style of the iframe containing the mini calendar. The style for id lcmini could for instance look as follows:
#lcmini { position:absolute; right:100px; top:15%; width:210px; height:233px; overflow:hidden;}
If you want the height of the mini calendar to vary automatically depending on the month to display (4, 5 or 6 weeks) you should add the following JavaScript code, which dynamically adjusts the height of the iframe, to the <head> section of the parent web page:
<script type="text/javascript"> function setHeight(newHeight){var plus=(document.all)?8:0; document.getElementById('lcmini').style.height=newHeight+plus+'px';}</script>
Please note: Automatic adjusting of the iframe height only works if the calendar is located in the same domain as the parent page. If not, the iframe height is set to cope with displaying 6 weeks.
Embed the Full Calendar
To embed the full LuxCal calendar in an existing web page, an inline frame (iframe) can be used. This can for example be done with the following HTML code:
<iframe id="luxcal" src="http://www.mysite.xx/luxcal/?cP=2"></iframe>
With parameter cP the default view can be set (e.g. year: cP=1, month: cP=2, . . . ,upcoming: cP=7)
If you want to display a subset of the available events, see "Applying Filters to the Calendar" below.
Via the CSS styles of your site, the id luxcal can be used to position and define the style of the iframe containing the luxcal calendar. The style for id luxcal could for instance look as follows:
#luxcal { width:80%; height:800px; margin:20px; border-style:solid; border-width:1px; border-color:grey; }
Embed One Specific Calendar View without Navigation Bar
To embed the LuxCal calendar without navigation bar, the parameter hdr=0 should be added to the URL as follows:
<iframe src="http://www.mysite.xx/luxcal/?hdr=0&cP=2"></iframe>
Without navigation bar the visitor will not be able to navigate the calendar and select other views. The following parameters can be added to select the view to display and the user-interface language:
- cP to set the view (e.g. year: cP=1, month: cP=2, . . . , upcoming: cP=7)
- cL to set the user-interface language (e.g. French: cL=Francais). The specified language must be present in the lang/ folder)
For example the HTML code to show the Upcoming Events page without navigation bar, in the French language looks as follows:
<iframe id="luxcal" src="http://www.mysite.xx/luxcal/?hdr=0&cP=7&cL=Francais"></iframe>
Via the CSS styles of your site, the id luxcal can be used to position and define the style of the iframe containing the LuxCal calendar. The style for id luxcal could for instance look as follows:
#luxcal { width:80%; height:800px; margin:20px; border-style:solid; border-width:1px; border-color:grey; }
Important:
The parameter hdr=0 is remembered via the PHP session mechanism; this means that if you access the embedded calendar without navigation bar, then thereafter, when accessing your normal (not-embedded) calendar when your session is still active (max. one hour) you will also see no navigation bar. This can be solved by adding the parameter hdr=1 to the URL of your normal calendar.
If you want to display a subset of the available events, see "Applying Filters to the Calendar" below.
Applying Filters to the Calendar
When using a link to the calendar, embed a minicalendar or embed the full calendar, parameters can be added to the calendar URL to specify which events hould be shown. When adding parameters, the following syntax should be used: The first parameter starts with a '?' and parameters are separated by an '&', like: www.mysite.net/calendar?par1=3&par2=7. If a parameter can have several values it can be passed as an array by adding square brackets toe the parameter name, like: www.mysite.net/calendar?par1[]=3&par1[]=7.
Parameter cG can be added to the URL to specify the IDs of one or several user groups for which events should be displayed. Parameter cC can be added to the URL to specify the IDs of one or several event categories for which events should be displayed. The user group IDs and event category IDs can be found on the admin's User Group page and Categories page respectively. For example, to specify a user group, with ID 4 the parameter "?cG[]=4" should be added to the URL. If the events of a second user group, for instance, with ID 6 should be displayed as well, then "?cG[]=4&cG[]=6" should be added to the URL. The same counts for the cC parameter when specifying one or more event categories to show.
Example:
If you want to display a calendar without header (navigation bar) showing events from users in the user groups with IDs 4 and 7 and only showing events in event category 2, then the link should be like: www.mysite.net/calendar?hdr=0&cG[]=4&cG[]=7&cC[]=2.
Single Sign On (SSO)
When the calendar is embedded in a PHP-based website where users have to log in, users logged in on the parent website can be logged in to the calendar automatically in a secure way, using PHP sessions.
To achieve this the parent website scripts should:
- start PHP sessions, if not done already, by adding the following PHP statement to the parent website PHP script:
session_start();
PHP sessions must be started before anything is sent out to the browser (like header information), so this statement must be added somewhere at the start of the script. - save the user name or the user email address in the session variable 'lcUser' by adding the following statement to the parent website PHP script at any point before the iframe statement with the calendar URL:
$_SESSION['lcUser'] = '<user email>';
The part <user email>
is a string with the user email address which corresponds to the email address required to log the user in to the calendar (specified by the admin when the calendar user account was created).
Because PHP session data are stored on the server, the user name / email address are not visible to the users.