Calendar Themes

File Location

Themes can be found within the /themes directory located in Kinetic Calendar root web application directory. One theme is provided with Kinetic Calendar as the default theme. The theme is responsible for the look and feel of various parts of the calendar application, as well as some of the custom functionality such as javascript click handlers.

Default Theme

The default theme contains four base JSP pages - each of them serving a different purpose in the application - along with some theme configuration files, reuseable JSP fragment pages, and supporting resource files such as images, stylesheets, and javascript files.

Below is an image of the default theme directory structure.

Main JSP Pages

There are four main parts to the calendar application. Each one deserves a JSP page dedicated to serving that particular need, so the default theme contains four main JSP pages:

• calendars.jsp - this is the main calendar listing page, which is responsible for listing active calendars. The default theme lists active calendars in a table displaying the calendar name and description. If the calendar name is clicked, the calendar page opens up to that calendar. Only one calendar listing page will be used by the web application, and can be set in the Administration Console.
• calendar.jsp - this is the calendar display page, which is responsible for rendering the calendar and displaying all the events that occur in the time frame the user is viewing.
• event.jsp - this page displays event details when the user clicks on an existing event, and the event type does not use a click handler. There can be multiple event detail jsp pages in a theme. Each event type configuration can specify the details page that should be rendered for that event type.
• error.jsp - this page is rendered when a error occurs in the Kinetic Calendar web application. It is usually best to show a generic error to the end user, as they don't need to know the exact problem that occurred within the application, and all errors that occur on the web server are logged for administrators to see what happened. The error.jsp page does contain the stacktrace of the problem, but it is contained in a hidden html element that is not displayed by default. If the debug=true parameter is present on the URL, the stacktrace will be visible on the error page as well. Only one error page will be used by the web application, and can be set in the Administration Console.

Theme Configuration

In the default theme directory, there is a config/config.jspf file that allows you to add custom theme properties that can be accessed from within any of your JSP pages. This is a good place to add variable data that may change over time, as it only needs to be entered in one place, thus requiring changes in only one place.

Properties can be added by simply defining a key or name, and assigning the value to this key using the theme.setProperty() method. The value can then be referenced from within JSP pages using the theme.getProperty() method.

Example of setting and retrieving a theme property:

// In the theme config/config.jspf file, set the Company Name property
theme.setProperty("Company Name", "Kinetic Data");

// In the JSP page, retrieve the Company Name property and display as heading text
<h1 class="companyName"><%= theme.getProperty("Company Name") %></h1>

// When rendered in a browser, results in the following HTML
<h1 class="companyName">Kinetic Data</h1>

Theme Framework

The theme framework consists of three different parts: helpers, includes, wrappers.