24 April 2014

LuxCal Demo Page

Calendar Demonstrations

The LuxCal demonstration calendars hereafter have a limited number of functions available to play around with. Visitors can add, edit and delete events, but have no administrator rights. In order to keep a representative demo calendar for all visitors, please do not delete the predefined events.

The LuxCal calendar can be used in the following ways, as demonstrated below:

All three demonstration calendars below use the same calendar database. Consequently changes to one of the demonstration calendars will be reflected in all three demonstration calendars.

Please note:
  • To keep the demo calendars tidy, the default demo content in the calendar database is reloaded every full hour
  • When you are not logged in, you will be able to post events and edit your own events. If you register yourself and log in, you will be able to post events and edit all events
  • To give other visitors a chance to experiment with the demo calendar, please don't delete the existing demonstration events.
  • The email notification feature in the demo calendar has not been activated and consequently will not work.

Full-size independent calendar in a new window

The link below will open a new page with the full independent LuxCal calendar. You can also browse directly to the LuxCal demo calendar via the following link: When you are using your mobile device, the calendar will automatically adjust it's pages to a small-size display.

Don't hesitate to add events to the demonstration calendar and to edit and/or delete you own added events.

Visitors have no admin rights. If you want us to change some calendar settings however, contact us via the Contact Us page and let us know what you would like us to change and when you will come back to see the change(s).

Full-size calendar embedded in one of your web pages

Below you can see the LuxCal demo calendar embedded in the current page. It has the same functionality as the full independent LuxCal calendar above, but its height and width are set by the parent web page (this page).

By adding certain parameters to the URL link of the calendar, it is also possible to display one specific calendar page, e.g. Upcoming Events, or to display the calendar without top bar and navigation bar, so that visitors can not change the view, the language, etc.

All possibilities are explained in the calendar's Installation Guide, which is included in the download package.

One month interactive mini calendar embedded in one of your web pages

Hereafter you will find a one month interactive mini calendar embedded in the web page. The minimum width, which is still useful, is approx. 160px. The height is calculated dynamically and changes automatically depending on the number of weeks to display (4, 5 or 6 weeks).

The mini calendar on the left is displayed with a width of 210px, which allows for at least four event squares next to each other in one day cell.

In the header of this mini calendar the user can select a previous or next month, by clicking "<<" or ">>" respectively. The user can also click the name of the month in the header to open a new window with the full calendar.

Like in the full-size calendar, hovering over events (squares) will trigger a popup box with all event details. If the event text fits, it will be displayed inside the mini calendar's inline frame.

The mini calendar uses the same settings as the full-size calendar. Consequently the user interface language and formats (date format, time format, etc.) of the mini calendar can be configured by the calendar administrator and are identical to the user interface language and formats of the full-size calendar.

In addition, the administrator can choose between Full Month view or Work Month view, showing work days only, and can enable or disable event posting for the mini calendar. When enabled, visitors can add, edit and delete events without opening the full-size calendar, which makes it a powerful interactive tool.

In this demonstration mini calendar event posting is enabled. You can add events by clicking the top bar in the day cells and you can edit and delete events by clicking on the event square. Try it! Once you have added, edited or deleted an event, the change will be reflected directly in the mini calendar

In the footer of the calendar RSS feeds are available and when a visitor selected "previous month" or "next month", a hyperlink to today's month will be displayed.

The LuxCal mini calendar uses it's own separate styles and color scheme and consequently the user interface can be styled independently from the full-size calendar.

A sidebar with upcoming events or a To-do list added to your web page

These Upcoming Events or To-do list sidebars are displayed via a <div>-tag and can be fully tailored to your needs. They show upcoming public events or events requiring action from your normal LuxCal calendar, grouped per date and for each event the time and title are displayed. If enabled by the calendar administrator, URLs in the event description (if any) will be displayed as hyperlinks just below the corresponding event and further event details will pop up when hovering an event with the mouse. For the To-do list events will have an interactive check box which can be (un)checked.

All Upcoming Events
Wednesday 23 April 2014 - Thursday 24 April 2014
All Day
Jane`s parents with us
Thursday 24 April 2014
Take Colin to the dentist
Friday 25 April 2014
7.00 - 10.00
7.30 - 8.00
Saturday 26 April 2014
Install Windows 8
Tuesday 29 April 2014
20.00 - 21.30
French language training
Thursday 1 May 2014
9.00 - 9.30
19.00 - 22.00
Time check
Friday 2 May 2014
7.00 - 10.00
Monday 5 May 2014
All Day
Friday 9 May 2014
7.00 - 10.00

Example side bars

In the right sidebar the events are filtered on event category "birthday" and in the left sidebar birthdays have been excluded.

All characteristics of the sidebar can be customized via a separate styles sheet (CSS), independently from the full-size calendar. For instance the sidebar can be positioned on an absolute location overlaying other elements on the web page, or it can integrated in the normal flow of elements. The size, the colors and the fonts can be changed. On the admin's Settings page the following can be specified:

♦ the number of days to look ahead for events in the sidebar

♦ whether further event details should pop-up (in the LuxCal way) when the user hovers an event

♦ if URLs from the event description (if any) should be displayed as hyperlinks in the sidebar

For these demonstration sidebars, the number of days to look ahead has been set to 21 and both other options have been enabled.

The title and the style of the sidebar can be set per sidebar and the events in the sidebar can be filtered on event category and/or user ID. This allows for more than one sidebar per site, each with its own title and a different list of upcoming events or To-do list.

The sidebar uses the same settings as the full-size calendar. Consequently the user interface language and formats (date format, time format, etc.) of the sidebar can be configured by the calendar administrator and are identical to the user interface language and formats of the full-size calendar.

Both demonstration sidebars use the same event database as the other demonstration calendars above; so changes in the calendars above are directly reflected in these sidebar (after refreshing the page).

To use upcoming events or To-do list sidebars, the full LuxCal calendar must be installed in the same domain as your website, so in a sub-directory of your website.