Add timeline event on DHtmlX scheduler in angularjs

Question

I have injected DHtmlX scheduler in my angularjs app with the help of this link . I have followed all the steps of the above link and it's working.

Now, I am trying to add timeline event in angular DHtmlX scheduler. But I am not getting the way how can I add timeline event on it. please help out on this.

Any suggestion or help would be appreciated , thanks in advance

Answer 1

I have got the way to add timeline event on DHtmlX scheduler in angularjs,

First add this js file dhtmlxscheduler_timeline.js in your angularjs project.(add this in src/assets/js folder and call this file )

Second add this code in directive of 'dhxScheduler' `

 var sections=[
        {key:1, label:"Section A"},
        {key:2, label:"Section B"}
    ];
scheduler.createTimelineView({
    name:   "timeline",
    x_unit:"minute",//measuring unit of the X-Axis.
    x_date:"%H:%i", //date format of the X-Axis
    x_step:30,      //X-Axis step in 'x_unit's
    x_size:24,      //X-Axis length specified as the total number of 'x_step's
    x_start:0,     //X-Axis offset in 'x_unit's
    x_length:48,    
    first_hour:10,
    last_hour:18,
    y_unit: sections,
    y_property:"unit_id",
    render:"bar"
});
     //---------------  end of timeline  -----------//        
scheduler.init($element[0], $scope.scheduler.date, $scope.scheduler.mode);
scheduler.parse([
    {id:1, text:"Task1", start_date:"12/10/2013 12:00", end_date:"12/10/2013 21:00", 
    unit_id:"1"},
    {id:2, text:"Task2", start_date:"17/10/2013 09:00", end_date:"17/10/2013 15:00", 
    unit_id:"2"}
  ],"json");`

for more detail on this visit these two links 1) Link1 2) Link2

Third add this line in view file(html file)

<div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>

Fourth add this line in directive of 'dhxTemplate'

scheduler.locale.labels.timeline_tab ="Timeline";

this works for me, hope this will also works for you all, thanks