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 >
);
}
}