Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Pablo on Mar 16, 2009 07:43
open dhtmlx forum
dhtmlxWindow and dhtmlxCalendar

Hi,

I've been trying to locate an example of how to accomplish the following but haven't found one....

I have a dhtmlxLayout which contains a grid. Clicking on a cell opens a window. Here's my problem.... Within the window I cannot seem to initiailize a calendar. I get an error message stating that "mCal' object is undefined. I have all of the calendar initialization (css styles and js) code within the window source HTML file. The object I am creating is "mCal".

Any ideas would be appreciated...
Answer posted by Alex (support) on Mar 16, 2009 08:11

Hello,

Without any sample it is hard to solve the issue.

Please, provide code snippet relating to window and calendar intialization.

Answer posted by Pablo on Mar 16, 2009 10:19
Here is some code snippets...

Main datagrid file:
load all necessary libraries...
<link rel="STYLESHEET" type="text/css" href="/css/styles.css">
<link rel="STYLESHEET" type="text/css" href="/dhtmlx/library/codebase/dhtmlxcombo.css">
<link rel="stylesheet" type="text/css" href="/dhtmlx/library/codebase/dhtmlxcalendar.css">
<link rel="STYLESHEET" type="text/css" href="/dhtmlx/library/codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="/dhtmlx/library/codebase/dhtmlxwindows.css">
<link rel="stylesheet" type="text/css" href="/dhtmlx/library/codebase/skins/dhtmlxwindows_dhx_blue.css">
<script src="/dhtmlx/library/codebase/dhtmlxcommon.js"></script>
<script src="/dhtmlx/library/codebase/dhtmlxcombo.js"></script>
<script src="/dhtmlx/library/codebase/dhtmlxcalendar.js"></script>
<script src="/dhtmlx/library/codebase/dhtmlxgrid.js"></script>
<script src="/dhtmlx/library/codebase/dhtmlxgridcell.js"></script>
<script src="/dhtmlx/library/codebase/ext/dhtmlxgrid_srnd.js"></script>
<script  src=/dhtmlx/library/codebase/dhtmlxwindows.js"></script>
<script>
    window.dhx_globalImgPath="/dhtmlx/library/codebase/imgs/";
</script>
.....
    <script>
        var x = new Date();
        var r = x.getTime();
        // function to initialize a window used by the grid data...
        function userinfo(uid){
            var dhxWins = new dhtmlXWindows();
            dhxWins.setImagePath("/dhtmlx/library/codebase/imgs/");             
            var win = dhxWins.createWindow("winuser", 10, 10, 740, 520);
            win.setText("Subscriber Information");
            win.attachURL("edituserinfo.cfm?uid="+uid+"&"+r , true);       
        }
    </script>
.......
grid populated via XML:
<?xml version="1.0" encoding="UTF-8"?>
<rows pos="0" total_count="34">
<row id="10572">
<cell><![CDATA[<a href="javascript:;" onclick="userinfo('10572')" style="text-decoration:underline;">Bxxxxx</a>]]></cell>
<cell>Peter John</cell>
<cell><![CDATA[<a href="javascript:;" onclick="logininfo('10497')" style="text-decoration:underline;">pbxxxx</a>]]></cell>
<cell>pxxxx@pxxxx.com</cell>
<cell/>
<cell>Free Trial</cell>
<cell> </cell>
<cell>01/13/2008</cell>
<cell>N</cell>
<cell>N</cell>
<cell>N</cell>
</row>
</rows>
.......
The call to the window is in the above CDATA

The window file called retrieves user data via the uid URL parameter. A table is generated dynamically. There is no loading of the dhtmlxcalendar css or js libraries in this file...
.....
<table>
.....
<tr>
   <td>Date Paid</td>
   <td><input name="datepaid" id="mCal_10572" type="text"></td>
</tr>
.....
</table>
                <script>
                    var newCalId = 'mCal_10572';
                    window [newCalId] = new dhtmlxCalendarObject('mCal_10572', false);
                    //window [newCalId].setSkin("yahoolike");
                    window [newCalId].setDateFormat("%m/%d/%Y");
                    window [newCalId].setYearsRange(2000,2020);                               
                    window [newCalId].winTitle = "Date Paid";
                    window [newCalId].draw();                
</script>



Answer posted by Alex (support) on Mar 16, 2009 11:23

Hello, 

In case of using ajax loading mode, the script is not executed.

The edituserinfo.cfm should generate only html structure, but JS code should be defined at the main page:

win.attachURL("edituserinfo.cfm?uid="+uid+"&"+r , true);  
dhxWins.attachEvent("onContentLoaded",initCalendar);

function initCalendar(){
 var newCalId = 'mCal_10572';
  mCal = new dhtmlxCalendarObject('mCal_10572', false);  
  mCal.setDateFormat("%m/%d/%Y");
  mCal.setYearsRange(2000,2020);  
  mCal.winTitle = "Date Paid";
  mCal.draw();  
}

Please, see attached sample. 

Attachments (1)