In HTML

var self = this;

$(document).ready(function(){

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

    //Step 1: Define the custom header and add it to the headers collection

    ....

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

    $('#container').FlexyGantt({

        TimeScaleHeaders : tmshs,

        .........

    });

});

function semiAnnualHeadercustomHeaderLine()

{

       var semiAnnualHeader = new ns_gantt.TimeScaleHeaderDefinition();

       semiAnnualHeader.name( "semiAnnualHeader" );

       semiAnnualHeader.Type = ns_gantt.TimeScaleType.Custom;

   // See how it's important to specify an approximate "hint" for the gantt to be able render this properly.

       semiAnnualHeader.CustomTimeScaleTypeHint = new RadiantQ.Gantt.CustomTimeScaleTypeHint( 6, ns_gantt.TimeScaleType.Months );

       semiAnnualHeader.ProvideCustomHeaderText.subscribe( provideCustomHeaderText );

       semiAnnualHeader.ProvideCustomTimeIntervals.subscribe( ProvideCustomTimeIntervals );

    // Step 2: Provide the custom intervals for this header for a given time span

   function ProvideCustomTimeIntervals( sender, args )

    {

        var start = args.ViewStartTime.clone();

        if(args.ViewStartTime.getMonth() < 6)

            start = new Date(start.getFullYear(), 6, 1);

        else

            start = new Date(start.getFullYear() + 1, 0, 1);

        for(var dateTime = start.clone(); args.ViewEndTime.compareTo(dateTime) >= 0; dateTime = dateTime.clone().addMonths(6)){

            var t = dateTime.clone().addMonths(6);

            args.TimeIntervals.push(dateTime.clone());

        }

    }

   // Step 3: Provide the header text for this custom headers

    function provideCustomHeaderText(sender, args){

        args.TooltipText = args.dateTime.getFullYear().toString();

        var half = ((args.dateTime.getMonth()) / 6) + 1;

        args.Text = "H" + Math.floor(half); // Displays H1 or H2

    }

       return semiAnnualHeader;

}

In ASP.NET MVC 

<script type="text/javascript"> 

    // Step 1: Provide the custom intervals for this header for a given time span

   function ProvideCustomTimeIntervals( sender, args )

    {

        var start = args.ViewStartTime.clone();

        if(args.ViewStartTime.getMonth() < 6)

            start = new Date(start.getFullYear(), 6, 1);

        else

            start = new Date(start.getFullYear() + 1, 0, 1);

        for(var dateTime = start.clone(); args.ViewEndTime.compareTo(dateTime) >= 0; dateTime =     dateTime.clone().addMonths(6)){

            var t = dateTime.clone().addMonths(6);

            args.TimeIntervals.push(dateTime.clone());

        }

    }

   // Step 2: Provide the header text for this custom headers

    function provideCustomHeaderText(sender, args){

        args.TooltipText = args.dateTime.getFullYear().toString();

        var half = ((args.dateTime.getMonth()) / 6) + 1;

        args.Text = "H" + Math.floor(half); // Displays H1 or H2

    }

      </script>

@Html.JQFlexyGantt(

        new JQFlexyGanttSettings()

        {

            ControlId = "gantt_container",          

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

            Options = new FlexyGanttOptions()

            {

                  TimeScaleHeaders = new TimeScaleHeaderDefinitions(){

                    .....

                    new TimeScaleHeaderDefinition(){

                        Type = TimeScaleType.Custom,

                        CustomTimeScaleTypeHint = new CustomTimeScaleTypeHint(6, Months),

                        ProvideCustomTimeIntervals="ProvideCustomTimeIntervals",

                        ProvideCustomHeaderText="provideCustomHeaderText"

                    }                  

                },

                ...               

            }               

})

In ASP.NET

<script type="text/javascript"> 

    // Step 1: Provide the custom intervals for this header for a given time span

   function ProvideCustomTimeIntervals( sender, args )

    {

        var start = args.ViewStartTime.clone();

        if(args.ViewStartTime.getMonth() < 6)

            start = new Date(start.getFullYear(), 6, 1);

        else

            start = new Date(start.getFullYear() + 1, 0, 1);

        for(var dateTime = start.clone(); args.ViewEndTime.compareTo(dateTime) >= 0; dateTime =     dateTime.clone().addMonths(6)){

            var t = dateTime.clone().addMonths(6);

            args.TimeIntervals.push(dateTime.clone());

        }

    }

   // Step 2: Provide the header text for this custom headers

    function provideCustomHeaderText(sender, args){

        args.TooltipText = args.dateTime.getFullYear().toString();

        var half = ((args.dateTime.getMonth()) / 6) + 1;

        args.Text = "H" + Math.floor(half); // Displays H1 or H2

    }

      </script>

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

    AfterGanttWidgetInitializedCallback="AfterGanttWidgetInitializedCallback"           

    TimeRangeHighlightBehavior="HighlightInChartOnHeaderMouseHover"

    LocalizationResourceFilePath="../../Src/ResourceStrings/"

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

    <TimeScaleHeaders>

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

        <GanttBase:TimeScaleHeaderDefinition Type="Custom" Name="customHeader"  ProvideCustomTimeIntervals="ProvideCustomTimeIntervals" ProvideCustomHeaderText="provideCustomHeaderText" >

            <CustomTimeScaleTypeHint EquivalentType="Months" EquivalentUnits="6" />

        </GanttBase:TimeScaleHeaderDefinition>                   

    </TimeScaleHeaders>               

</RQ:GanttControl>