javascriptangularjsdhtmlxdhtmlx-scheduler

Add timeline event on DHtmlX scheduler in angularjs


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


Solution

  • 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