problem with displaying the calendar

Suite and Optimus Suite 5
#1

I have a problem in displaying a calendar in a Grid, see the attached file - you can barely see the calendar - it is still functional, you can see it that well.

[code] 

    <script src="../third_party/modules/dhtmlx/grid/dhtmlxcommon.js" type="text/javascript" charset="utf-8"></script>
<script src="../third_party/modules/dhtmlx/grid/dhtmlxgrid_pro.js" type="text/javascript" charset="utf-8"></script>
<script src="../third_party/modules/dhtmlx/grid/dhtmlxgridcell.js" type="text/javascript" charset="utf-8"></script>        
                    
<script src="../third_party/modules/dhtmlx/dhtmlxCalendar/codebase/dhtmlxcalendar.js" type="text/javascript" charset="utf-8"></script>        
<script src="../third_party/modules/dhtmlx/grid/excells/dhtmlxgrid_excell_dhxcalendar.js" type="text/javascript" charset="utf-8"></script>        

    <script  src="../third_party/modules/dhtmlx/grid/excells/dhtmlxgrid_excell_link.js" type="text/javascript" charset="utf-8"></script>

    <script  src="../third_party/modules/dhtmlx/grid/ext/dhtmlxgrid_pgn.js" type="text/javascript" charset="utf-8"></script>
    <script  src="../third_party/modules/dhtmlx/grid/ext/dhtmlxgrid_export.js" type="text/javascript" charset="utf-8"></script>      
                    
<script src="../third_party/modules/dhtmlx/dhtmlxdataprocessor.js" type="text/javascript" charset="utf-8"></script>
<script src="../third_party/modules/dhtmlx/connector/connector.js" type="text/javascript" charset="utf-8"></script>
            
<link rel="stylesheet" href="../third_party/modules/dhtmlx/grid/dhtmlxgrid_pro.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="../third_party/modules/dhtmlx/grid/dhtmlx.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="../third_party/modules/dhtmlx/grid/skins/dhtmlxgrid_dhx_skyblue.css" type="text/css" media="screen" title="no title" charset="utf-8"> 
<link rel="stylesheet" href="../third_party/modules/dhtmlx/dhtmlxCalendar/codebase/dhtmlxcalendar.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="../third_party/modules/dhtmlx/dhtmlxCalendar/codebase/skins/dhtmlxcalendar_dhx_skyblue.css" type="text/css" media="screen" title="no title" charset="utf-8">
                     
<h1 style='width:95%; padding:20px; font-family:Tahoma;font-weight:normal;background:#f2f3f4;'>Action Data</h1>
        <input type="button" value="Get as PDF" onclick="mygrid.toPDF('../third_party/modules/dhtmlx/grid/grid-pdf/generate.php');">
        <input type="button" value="Get as Excel" onclick="mygrid.toExcel('../third_party/modules/dhtmlx/grid/grid-excel/generate.php');">        
<div id="action" style="width:100%; height:500px;background-color:white;"></div>
    <div><span id="pagingArea"></span>&nbsp;<span id="infoArea"></span></div>        
<input type="button" value='Add' onclick='add_row();'>
<input type="button" value='Delete selected' onclick='mygrid.deleteSelectedRows()'>
    
    <div class="smallgray" style="height:90px;"> Double-click or [F2] on <b>cell to edit</b>. Use [Tab] to navigate through cells, [Up/Down] - to navigate through rows.<br></div>
function onButtonClick(menuitemId, type) { var data = mygrid.contextID.split("_"); //rowId_colInd; mygrid.setRowTextStyle(data[0], "color:" + menuitemId.split("_")[1]); return true; } function add_row(){ var id = mygrid.uid(); mygrid.addRow(id, ["0","0","0","0","0","0","0","0","0","0","0","0","0"," "," "]); mygrid.selectRowById(id); } // My Grid mygrid = new dhtmlXGridObject('action'); // Set the path of where the images are located mygrid.setImagePath("../third_party/modules/dhtmlx/grid/imgs/"); // Set the text for the header of the grid mygrid.setHeader("Campaign ID, Year, Week, Country, Office, Region, da, dc, po, pro, x, Campaign, Programme, Description, Comment"); // Attach 2nd level header and selections options mygrid.attachHeader("#select_filter,#select_filter,#select_filter,#select_filter,#select_filter,#select_filter, , , , , ,#select_filter,#select_filter"); // Set the width of the cells row for the grid mygrid.setInitWidths("100,80,50,*,*,*,30,30,30,30,30,*,*,20,20"); mygrid.enableAutoWidth(true); // Set the Column Alignment mygrid.setColAlign("left,left,left,left,left,left,left,left,left"); // Set the column types for the grid // mygrid.setColTypes("ed,ed,ed,combo,combo,combo,ed,ed,ed,ed,ed,combo,combo,ed,ed"); // Set the column types for the grid mygrid.setColTypes("ed,dhxCalendarA,ed,combo,combo,combo,ed,ed,ed,ed,ed,combo,combo,ed,ed"); // mygrid.getCombo(5).put(2, 2); mygrid.setColSorting("int,date,str,int,int,int,int,int,int,int,int,int,int,int,int"); // Grouping of columns mygrid.groupBy(1); // Enable Light Mouse Navigation mygrid.enableLightMouseNavigation(true); // Enable enable hot keys mygrid.enableKeyboardSupport(true); // Set skin mygrid.setSkin("dhx_skyblue"); // Initialize mygrid.init(); // Load Data mygrid.loadXML("action/data"); [/code]
image3.png1139×219 12.5 KB

#2

Please, make sure the correct dhtmlxcalendar.css is included to your page.

Also, please, have a look at the hints in the following post:
viewtopic.php?f=2&t=31767

If issue still occurs for you - please, provide a complete demo.
Here you can find a tutorial:
docs.dhtmlx.com/doku.php?id=othe … leted_demo

#3

Thanks for the response - it is working great now after removing the include js and css files.