DHTMLX Docs & Samples Explorer

Styling

Calendar has different CSS skins. You may set any of them by the setSkin method.

CSS Skins:


Source
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxcalendar.css">
<link rel="STYLESHEET" type="text/css" href="../../codebase/skins/dhtmlxcalendar_classic.css">
<link rel="STYLESHEET" type="text/css" href="../../codebase/skins/dhtmlxcalendar_dhx_black.css">
<link rel="STYLESHEET" type="text/css" href="../../codebase/skins/dhtmlxcalendar_dhx_blue.css">
<link rel="STYLESHEET" type="text/css" href="../../codebase/skins/dhtmlxcalendar_dhx_skyblue.css">
<link rel="STYLESHEET" type="text/css" href="../../codebase/skins/dhtmlxcalendar_simpleblue.css">
<link rel="STYLESHEET" type="text/css" href="../../codebase/skins/dhtmlxcalendar_simplecolordark.css">
<link rel="STYLESHEET" type="text/css" href="../../codebase/skins/dhtmlxcalendar_simplecolorsand.css">
<link rel="STYLESHEET" type="text/css" href="../../codebase/skins/dhtmlxcalendar_simplegrey.css">
<link rel="STYLESHEET" type="text/css" href="../../codebase/skins/dhtmlxcalendar_vista.css">
<link rel="STYLESHEET" type="text/css" href="../../codebase/skins/dhtmlxcalendar_yahoolike.css">
<script>
window.dhx_globalImgPath = "../../codebase/imgs/";
</script> <script src="../../codebase/dhtmlxcommon.js"></script> <script src="../../codebase/dhtmlxcalendar.js"></script> <script>
var mCal;
 
window.onload = function() {
    mCal = new dhtmlxCalendarObject('dhtmlxCalendar', true, {
        isWinHeader: true,
        isWinDrag: false
    });
}
</script> <table border="0" cellpadding="5" cellspacing="3"> <tr> <td valign="top"><div id="dhtmlxCalendar"></div></td> <td valign="top" align="center"> <h3>CSS Skins:</h3> <select name="cssName" id="skinSelect" onChange="mCal.setSkin(this.value);"> <option value="" selected >= default =</option> <option value="yahoolike">Yahoo like</option> <option value="simplegrey">Simple gray</option> <option value="simpleblue">Simple blue</option> <option value="vista">Windows Vista</option> <option value="simplecolordark">Simple color dark</option> <option value="simplecolorsand">Simple color sand</option> <option value="classic">Classic</option> <option value="dhx_blue">Dhx Blue</option> <option value="dhx_black">Dhx Black</option> <option value="dhx_skyblue">Dhx Skyblue</option> </select> </td> <tr> </tr> </table> <br>