In a layout, how do I make Calendar popup over all cells?

Suite and Optimus Suite 5
#1

In the example that I’ve attached, by default, the calendar popup appears to display only within the cell from which it was launched. I cannot figure-out how to make the calendar popup appear above all cells.

Thank you for your help. Here’s the code sample below. For whatever reason (javascript?) I could not upload this sample because your forum software thought it was a “possible attack vector”.

The only thing you’ll need to change below would be the relative paths for the css, .js and .gif images. I am using IE8 in compatibility mode and DHTMLX Suite 2.5 Professional.

[code]<%@ page language=“java” contentType=“text/html; charset=ISO-8859-1”
pageEncoding=“ISO-8859-1”%>

Layouts with Popup Calendar 
<script src="../../../common/dhtmlx/dhtmlxLayout/codebase/dhtmlxcommon.js"></script>
<script src="../../../common/dhtmlx/dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>
<script src="../../../common/dhtmlx/dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
<script src="../../../common/dhtmlx/dhtmlxCalendar/codebase/dhtmlxcalendar.js"></script>
.dhtmlxcalendar { z-index:2000; }
The layout divs, tds, trs below for the calendar were copied verbatum from the DHTMLX Calendar example 07_calendar_sensisitivity.html. There is one problem that I can't solve.
  • How do I get the Calendar popup to display above all cells of the layout. In this case, it only pops-up within one layout cell. I tried setting the z-index but that didn't seem to work.
DHTMLX Example: 
[/code]
#2

There is setPosition method that allows to show calendar is a certain position:

calendar.setPosition(top_pos,left_pos);

#3

No, this is not a positioning problem it’s a z-index issue. setPosition(top,left) does indeed position the popup calendar but it is still behind the other cells of the layout. I want the popup to be on top of ALL cells of a layout. Thanks.

-Doug

#4

Calendar container is placed inside div with relative position. Therefore the calendar is shown only inside this div.

You may try to place the “calendar1” as child of the document body. For example
…

...
#5

Thank you very much. That does indeed work.