<!DOCTYPE html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Custom scales</title> </head> <script src="../../codebase/dhtmlxgantt.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="../../codebase/dhtmlxgantt.css" type="text/css" media="screen" title="no title" charset="utf-8"> <script src="../common/testdata.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> html, body{ height:100%; padding:0px; margin:0px; overflow: hidden;} .gantt_container .gantt_grid_scale .gantt_grid_head_cell { line-height: 43px; } .gantt_container .gantt_scale_cell { padding-top: 4px; line-height: 17px; } </style> <body> <div id="gantt_here" style='width:100%; height:100%;'></div> <script type="text/javascript"> var scale_day = 0; gantt.templates.date_scale = function(date) { var d = gantt.date.date_to_str("%F %d"); return "<strong>Day " + (scale_day++) + "</strong><br/>" + d(date); } gantt.config.scale_height = 44; gantt.init("gantt_here"); gantt.parse(demo_tasks); </script> </body>