How do I set the skin on a calendar embedded in a grid?

Suite and Optimus Suite 5
#1

Very new to this library. How do I set the skin on a calendar embedded in a grid? I set the grid skin, but the calendar has the dhx_skyblue skin applied?

Here is the code that creates the grid:


	<link rel="stylesheet" type="text/css" href="../JS/dhtmlx-4.0/sources/dhtmlxGrid/codebase/skins/light.css" />
	<link rel="stylesheet" type="text/css" href="../JS/dhtmlx-4.0/sources/dhtmlxCalendar/codebase/skins/light.css" />
<script src="../JS/dhtmlx-4.0/sources/dhtmlxCommon/codebase/dhtmlxcommon.js" type="text/javascript"></script>

	<%-- dhtmlx grid --%>
	<script src="../JS/dhtmlx-4.0/sources/dhtmlxGrid/codebase/dhtmlxgrid.js" type="text/javascript"></script>
	<script src="../JS/dhtmlx-4.0/sources/dhtmlxGrid/codebase/excells/dhtmlxgrid_excell_dhxcalendar.js" type="text/javascript"></script>
	<script src="../JS/dhtmlx-4.0/sources/dhtmlxGrid/codebase/ext/dhtmlxgrid_srnd.js" type="text/javascript"></script>

	<%-- dhtmlx calendar --%>
	<script src="../JS/dhtmlx-4.0/sources/dhtmlxCalendar/codebase/dhtmlxcalendar.js" type="text/javascript"></script>

	<%-- dhtmlx form --%>
	<script src="../JS/dhtmlx-4.0/sources/dhtmlxForm/codebase/dhtmlxform.js" type="text/javascript"></script>
	<script src="../JS/dhtmlx-4.0/sources/dhtmlxForm/codebase/ext/dhtmlxform_item_calendar.js" type="text/javascript"></script>

	<%-- dhtmlx helpers --%>
	<script src="../JS/dhtmlx-helpers/dhtmlx-helpers.js" type="text/javascript"></script>
...

 var loadingRates = false;
        function loadRates(rateType, planID) {
            loadedRateType = rateType;

            //TFS-13703 - Add new UI elements to Payor Plan Screen for Holiday billing.
            setHolidayRateColumnVisibility(document.getElementById("<%=hdnIsHolidayRateFeatureEnabled.ClientID%>").value == "1" && document.getElementById("<%=chkHolidayBillingRate.ClientID%>").checked == true);

            grdRates = new dhtmlXGridObject('dvRatesGrid');
            grdRates.setImagePath("../Images/");

            grdRates.setColumnIds(rateGridColumnInfo.map(function (col) { return col.id; }).join(','));
            grdRates.setHeader(rateGridColumnInfo.map(function (col) { return typeof(col.label) === 'function' ? col.label(rateType) : col.label; }).join(','));
            grdRates.setInitWidthsP(rateGridColumnInfo.map(GetColumnWidth).join(','));
            grdRates.setColTypes(rateGridColumnInfo.map(GetRateGridColumnType).join(','));
            grdRates.attachEvent("onXLE", loadServiceCombo);
            grdRates.attachEvent("onEditCell", grdRates_EditCell);

            grdRates.setSkin("light");
            grdRates.enableMultiselect(false);

            grdRates.init();

            grdRates.enableEditTabOnly(true);

            var dt = new Date();
            grdRates.loadXML('AjaxBillingHandler.aspx?Type=PayorRate&rateType=' + rateType + '&planID=' + planID + "&temp=" + dt.getSeconds() + getRateFilterQuery());
            showLoader();

            // TFS-7698 - Added some logic to not disable the loading screen when rates are being loaded.
            loadingRates = true;

            for (var i = 0, n = rateGridColumnInfo.length; i < n; i++) {
                var col = rateGridColumnInfo[i];
                var hmm = grdRates.getColIndexById(col.id);
                rateGrid[col.id] = grdRates.getColIndexById(col.id);
            }

            clearPendingRates();
        }
#2

In case of using the “dhxCalendar” excell type of the grid calendar uses the skin of the grid by default.
You may set the skin to the calendar the following way:

mygrid.attachEvent("onDhxCalendarCreated",function(cal){ cal.setSkin(skin_name) })

#3

Thank you, this worked.