Creat Timeline view in react


#1

I create the Timeline View in React ,it is not show the data.At the same time, create event and dblclick event both no response,How can i do? Would please give me some advice?
Thanks

import React, { Component } from 'react'
import 'dhtmlx-scheduler';
import 'dhtmlx-scheduler/codebase/ext/dhtmlxscheduler_timeline'
import 'dhtmlx-scheduler/codebase/dhtmlxscheduler_material.css';

const scheduler = window.scheduler
const sections = [
{ key: 1, label: "C#12" },
{ key: 2, label: "C#15" },
{ key: 3, label: "A#23" },
{ key: 4, label: "A#22" },
{ key: 5, label: "C#11" },
{ key: 6, label: "C#21" },
{ key: 7, label: "D#01" },
{ key: 8, label: "D#14" },
]
export default class Timeline extends Component {

componentDidMount() {
    scheduler.skin = 'material';
    scheduler.config.header = [
        // "day",
        // "week",
        // "month",
        "timeline",
        "date",
        "prev",
        "today",
        "next"
    ]
    scheduler.locale.labels.timeline_tab = "Timeline";
    scheduler.locale.labels.section_custom = "Section";
    scheduler.config.details_on_create = true;
    scheduler.config.details_on_dblclick = true;
    //===============
    //Configuration
    //===============

    
    var sections = [
        { key: 1, label: "C#12" },
        { key: 2, label: "C#15" },
        { key: 3, label: "A#23" },
        { key: 4, label: "A#22" },
        { key: 5, label: "C#11" },
        { key: 6, label: "C#21" },
        { key: 7, label: "D#01" },
        { key: 8, label: "D#14" },
    ];
  
    scheduler.createTimelineView({
        name: "timeline",
        x_unit: "hour",
        x_date: "%H:%i",
        x_step: 1,
        x_size: 15,
        x_start: 8, 
        x_length: 24,
        y_unit: sections,
        y_property: "section_id",
        render: "bar",
        // scrollable: true,
        // column_width: 30,
        // scroll_position: new Date(Date.now()),
    });
    var timeline = scheduler.matrix.timeline;
    console.log(timeline);
    //===============
    //Data loading
    //===============
    scheduler.config.lightbox.sections = [
        { name: "description", height: 50, map_to: "text", type: "textarea", focus: true },
        { name: "name", height: 30, type: "select", options: sections, map_to: "section_id" },
        { name: "time", height: 72, type: "time", map_to: "auto" }
    ];

    scheduler.init(this.schedulerContainer, new Date(Date.now()), "timeline");
    scheduler.parse([
        { start_date: "2022-01-09 09:00", end_date: "2022-01-09 12:00", text: "Task A-12458", section_id: 1 },
        { start_date: "2022-01-09 10:00", end_date: "2022-01-09 16:00", text: "Task A-89411", section_id: 2 },
        { start_date: "2022-01-09 10:00", end_date: "2022-01-09 14:00", text: "Task A-64168", section_id: 3 },
        { start_date: "2022-01-09 16:00", end_date: "2022-01-09 17:00", text: "Task A-46598", section_id: 4 },

        { start_date: "2022-01-09 12:00", end_date: "2022-01-09 20:00", text: "Task B-48865", section_id: 5 },
        { start_date: "2022-01-09 14:00", end_date: "2022-01-09 16:00", text: "Task B-44864", section_id: 6 },
        { start_date: "2022-01-09 16:30", end_date: "2022-01-09 18:00", text: "Task B-46558", section_id: 7 },
        { start_date: "2022-01-09 18:30", end_date: "2022-01-09 20:00", text: "Task B-45564", section_id: 8 },
    ]);
}

render() {

    return (
        <div style={{ width: '1400px', height: '900px' }}>
           
            <div
                ref={(input) => { this.schedulerContainer = input }}
                style={{ width: '100%', height: '100%' }}
            >
            </div>
        </div >
    );
}

}


#2

Hello @Antares,

Thank you for the detailed description of the issue and code fragments. I tried to reproduce the issue in our React demo:

But the Timeline view works correctly:
http://recordit.co/JfhnBAS4Yv

And data loads correctly too:

Currently, it’s hard to suggest what goes wrong in your case. Could you please provide more details on how to reproduce the issue, or send me in PM:


a simplified demo with all necessary files, that I will be able to run locally and reproduce the issue?

Or you can try to reproduce the issue in our official demo(above), and check if it still will exist.

Kind regards,