Skip to main content
Kinetic Community

Styling Calendar to embed in another page

A customer has a need to embed Kinetic Calendar in another web page through the use of an iFrame element.  As an example, we have illustrated embedding Kinetic Calendar within an iFrame in a Kinetic Request form. Using the default calendar display page, the embedded calendar will look something like the screenshot below:   The customer only wants to display the main calendar however, not all the other items that are normally displayed on Kinetic Calendar such as the header banner, the sidebar (small calendar and event types), and the navigation links.  Making a few style changes, the embedded calendar can look like this:   This article will show you how to adjust the CSS properties to hide these elements, and how to include these changes into your page.

Usage

The attached package contains a theme with a custom jsp and css stylesheet to change the display properties for some elements that should not be displayed for the embedded calendar.  This theme needs to be copied to the Kinetic Calendar web application, and the calendar needs to use this jsp as the display page.

The jsp is just a wrapper that loads the default calendar display page jsp, and then loads some additional styles by including the theme stylesheet.

The stylesheet contains the following css styles to remove some elements from the rendered page:

 

#header {
    display: none;
}

#sidebar {
    display: none;
}

​#sidenav {

   display: none;

​}

#mcal {
    margin-left: 0;
}

#cnav {
    display: none;
}

#cdatenav {
    display: none;
}

 

#header - id of the header banner div element at the top of the page

#sidebar - id of the the sidebar div element containing the small calendar, the event type lists, and the timezone picker

#sidenav - id of the sidebar div element containing the small calendar in day view

#mcal - id of the the large calendar div element

#cnav - id of the navigation links (today, previous, next) div element

#cdatenav - id of the view tabs (day, week, month, list) div element

 

Instructions for Use

  1. Download the attached themes.zip file and extract to your Kinetic Calendar web application root folder.
  2. Change the Display Page setting of your embedded calendar to use the new theme jsp.
    1. Open the Calendar Manager Console with the Remedy User application or in Mid-Tier.
    2. Select the calendar that you are embedding, and click the 'Modify' button to view the properties.
    3. Change the Display Page field to ​themes/neat/kincal_neat.jsp​ ​​CalendarProperties.jpg
    4. ​Save your changes.