addMarkedTimespan Not Displaying if Outside 0 to 1440

Scheduler Javascript
#1

I have a bar which displays from 12/31/2013 17:00 to 1/2/2014 14:00. There is a single event within this time which displays correctly but I also want to display a limit on each end which is zone numbers [-420,-345,1755,2280]. If we consider the zone as [a,b,c,d] the timespan will not display if b <= 0 or c >= 1440. Please see the html code below for a working example.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="/Scripts/dhtmlxscheduler/dhtmlxscheduler.js" type="text/javascript"></script>
    <script src="/Scripts/dhtmlxscheduler/ext/dhtmlxscheduler_limit.js"></script>
    <script src="/Scripts/dhtmlxscheduler/ext/dhtmlxscheduler_timeline.js"></script>
    <script src="/Scripts/dhtmlxscheduler/ext/dhtmlxscheduler_treetimeline.js"></script>

    <link rel="stylesheet" href="/Content/dhtmlxscheduler/dhtmlxscheduler.css" type="text/css" />

    <style type="text/css">
        html, body{
            margin:0px;
            padding:0px;
            height:100%;
            overflow:hidden;
        }   
        .section
        {
            background-color: gray;
            opacity:.4;
        }
    </style>
</head>
<body>
    <div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
        <div class="dhx_cal_navline">
            <div class="dhx_cal_prev_button">&nbsp;</div>
            <div class="dhx_cal_next_button">&nbsp;</div>
            <div class="dhx_cal_today_button"></div>
            <div class="dhx_cal_date"></div>
            <div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
            <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
            <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
            <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
        </div>
        <div class="dhx_cal_header"></div>
        <div class="dhx_cal_data"></div>       
    </div>

    <script type="text/javascript">
        scheduler.locale.labels.timeline_tab = "Timeline";
        scheduler.createTimelineView({
            name: "timeline",
            x_unit: "hour",//measuring unit of the X-Axis.
            x_date: "%H", //date format of the X-Axis
            x_step: 1,     //X-Axis step in 'x_unit's
            x_size: 45,      //X-Axis length specified as the total number of 'x_step's
            x_start: -7,     //X-Axis offset in 'x_unit's
            x_length: 45,    //number of 'x_step's that will be scrolled at a time
            y_unit: [
                {
                    key: "1", label: "Driver #1", open: true, children: [
                       {
                           key: "2", label: "ABC-00", open: true, children: [
                              { key: "3", label: "00001" }
                           ]
                       },
                    ]
                }
            ],
            y_property: "section_id", //mapped data property
            render: "tree"             //view mode
        });

        scheduler.init('scheduler_here', new Date("01/01/2014"), "timeline");
        var events = [
            { id: 1, text: "ABC-00", start_date: "01/01/2014 08:00", end_date: "01/01/2014 14:00", section_id: "2" }
        ];
        scheduler.parse(events, "json");
        scheduler.addMarkedTimespan({
            days: 3,
            zones: [-420, 0, 1439, 2280],
            sections: { timeline: 3 },
            css: "section",
            html: "<div style=\"text-align: center\">Test</div>"
        });
        scheduler.updateView();
    </script>
</body>
</html>