[React] Timeline view sample

Scheduler
#1

As a start, I’ve checked the other topic, namely: Creat Timeline view in react - Scheduler - DHTMLX, but it left me even more confused.

I’m evaluating the PRO license of the Scheduler component and I’m trying to integrate it into a react application. I’ve followed the PRO installation guide in the docs to install the package locally and managed to get it going in its simplest form. Now I want to create a Timeline view but I can’t find any good resources how to achieve that in react. I’ve followed this: Timeline View Scheduler Docs (dhtmlx.com) and did the steps outlined there but I can’t manage to achieve anything. Can’t post sandbox due to using the PRO license. Then, after checking the other forum thread, I noticed that it is done in entirely different way than the one mentioned in the docs. For example:
docs:

<div id="scheduler_here" class="dhx_cal_container" ...>
    <div class="dhx_cal_navline">
       ...
       <div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
    </div>
    ... 
</div>

the other thread:

    scheduler.config.header = [
        // "day",
        // "week",
        // "month",
        "timeline",
        "date",
        "prev",
        "today",
        "next"
    ]

Turns out the docs are outdated.

So, my questions:

  1. Where can we find an up-to-date documentation on Scheduler usage.
  2. Where can we find a REACT sample implementing a timeline view.

I’ve posted a ticket 2 days ago but I still haven’t received any reply on the topic so I hope I can find some help here.

#2

Hello,

Where can we find an up-to-date documentation on Scheduler usage.

The documentation about Timeline view is up-to-date and contains the required information to create a Timeline view in the Scheduler.
According to the second step about adding the view’s tab to the scheduler’s markup:

<div id="scheduler_here" class="dhx_cal_container" ...>
    <div class="dhx_cal_navline">
       ...
       <div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
    </div>
    ... 
</div>

This example is applied if you initialize the Scheduler via markup:
Initializing Scheduler on a Page Scheduler Docs ;
And the following code:

    scheduler.config.header = [
        // "day",
        // "week",
        // "month",
        "timeline",
        "date",
        "prev",
        "today",
        "next"
    ]

might be implemented if you initialize the Scheduler via header config:
Initializing Scheduler on a Page Scheduler Docs ;
The result of both approaches will be the same.

Where can we find a REACT sample implementing a timeline view.

To add the Timeline view to the scheduler in React is similar as in the following article:
Timeline View Scheduler Docs ;
Please check the React demo of Scheduler with timeline view:
https://files.dhtmlx.com/30d/63d1bd27d535647a5f2121412457f73a/react-scheduler-6.0.2-timeline.zip ;

Steps to run:
Unzip
Run yarn install
Run yarn start

#3

Thank you for the clarification.