Default Time Scale Header

The Time Scale Headers refer to the headers in the gantt chart that define how the horizontal span of the gantt chart should be divided into days, weeks, etc.

Default Time Scale Header.

As seen above the default headers consist of a header row of type "Days" and another of type "Weeks". This is the default definition in the Gantt widget's TimeScaleHeaders option. If the headers are not specified in Gantt it automatically renders the default header.

To add/remove header rows, you will have to add/remove TimeScaleHeaderDefinition instances to the above collection property.

The code below shows how to add a headers in GanttChart.

In HTML

var self = this;

$(document).ready(function(){

var tmshs = new RadiantQ.Gantt.TimeScaleHeaderDefinitions();

tmshs.HeaderCollection.add(self.monthHeaderLine());

tmshs.HeaderCollection.add(self.weekHeaderLine());

tmshs.HeaderCollection.add(self.dayHeaderLine());

$('#container').FlexyGantt({

TimeScaleHeaders : tmshs,

.........

});

function weekHeaderLine(){

var weeksHeader = new RadiantQ.Gantt.TimeScaleHeaderDefinition();

weeksHeader.Type = RadiantQ.Gantt.TimeScaleType.Weeks;

return weeksHeader;

}

function monthHeaderLine(){

var monthsHeader = new RadiantQ.Gantt.TimeScaleHeaderDefinition();

monthsHeader.Type = RadiantQ.Gantt.TimeScaleType.Months;

return monthsHeader;

}

function dayHeaderLine(){

var daysHeader = new RadiantQ.Gantt.TimeScaleHeaderDefinition();

daysHeader.TextFormat = "ddd";

daysHeader.Type = RadiantQ.Gantt.TimeScaleType.Days;

return daysHeader;

}

In ASP.NET MVC

@Html.JQFlexyGantt(

new JQFlexyGanttSettings()

{

ControlId = "gantt_container",

AfterDataRetrievedCallback = "AfterDataRetrievedCallback",

AfterGanttWidgetInitializedCallback = "AfterGanttWidgetInitializedCallback",

DataSourceUrl = new Uri("/Home/GetFlexyGanttItemSource", UriKind.RelativeOrAbsolute),

Options = new FlexyGanttOptions()

{

TimeScaleHeaders = new TimeScaleHeaderDefinitions(){

new TimeScaleHeaderDefinition(){

Type = TimeScaleType.Months

new TimeScaleHeaderDefinition(){

Type = TimeScaleType.Weeks

new TimeScaleHeaderDefinition(){

Type = TimeScaleType.Days

}

})

In ASP.NET

<RQ:GanttControl ID="gantt" DataSourceUrl="../../DataSources/TaskListHandler.ashx"

AfterGanttWidgetInitializedCallback="AfterGanttWidgetInitializedCallback"

TimeRangeHighlightBehavior="HighlightInChartOnHeaderMouseHover"

Height="500px" runat="server" >

<GanttBase:TimeScaleHeaderDefinition Type="Years" Name="yearHeader" />

<GanttBase:TimeScaleHeaderDefinition Type="Months" Name="monthHeader" TextFormat="MMM yyyy" />

<GanttBase:TimeScaleHeaderDefinition Type="Days" Name="daysHeader" />

</TimeScaleHeaders>

</RQ:GanttControl>

Monthly, Weekly and Daily Headers