I installed scheduler plugin using npm and i pasted the dhtmlxscheduler_timeline.js at dhtmlx-scheduler/codebase/ext/ location but when i run the code i am getting error scheduler.plugin is not a function in dhtmlxscheduler_timeline.js.
import React, { Component, PropTypes } from ‘react’;
import { connect } from ‘react-redux’;
import ‘dhtmlx-scheduler/codebase/dhtmlxscheduler’;
import ‘dhtmlx-scheduler/codebase/ext/dhtmlxscheduler_timeline.js’;
import ‘dhtmlx-scheduler/codebase/ext/dhtmlxscheduler_collision.js’;
import ‘dhtmlx-scheduler/codebase/ext/dhtmlxscheduler_key_nav.js’;
class SchedulerdetailView extends Component {
componentDidMount() {
//////////////
let data = this.props.data.data;
let sections=[];
$.each(data.employeeDetail, function(i,ele){
let temp ={};
temp[‘key’] = ele.empId;
temp[‘label’] = ele.empName;
temp[‘role’] = ele.empRole;
temp[‘bescNum’] = ele.empBESCNum;
temp[‘phNum’] = ele.empPhoneNum;
sections.push(temp);
});
let data1 = [];
$.each(data.employeeWorkDetail, function(i,el){
console.log(el);
let temp = {};
temp[“empId”] = el.empId;
});
scheduler.locale.labels.timeline_tab = “Timeline”;
scheduler.locale.labels.section_custom=“Section”;
scheduler.config.details_on_create=true;
scheduler.config.details_on_dblclick=true;
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.config.default_date = "%j %M %Y (#%W)";
//===============
//Configuration
//===============
scheduler.createTimelineView({
name: "timeline",
x_unit: "day",
x_date: "%d %M %y",
x_step: 1,
x_size: 12,
x_start: 0,
x_length: 12,
y_unit: sections,
y_property: "empId",
render:"bar",
round_position:true
});
//===============
//Data loading
//===============
scheduler.config.lightbox.sections=[
{name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
{name:"custom", height:23, type:"select", options:sections, map_to:"empId" },
{name:"time", height:72, type:"time", map_to:"auto"}
];
scheduler.templates.event_class = function(start,end,ev){
if(ev.type === "forecast")
return "forecastele customTask";
else if(ev.type === "outage")
return "outageele customTask";
};
scheduler.templates.timeline_scale_label = function(start,end,ev){
let str = '<p>'+ev.label+'</p><p>'+ev.role+'</p><p>BESC No: '+ev.bescNum+'</p>';
return str;
};
scheduler.init('scheduler_here',new Date(2017,5,30),"timeline");
scheduler.parse([
{ start_date: "2017-06-30 09:00", end_date: "2017-07-15 12:00", text:"Task A-12458", empId:1673, color: 'white', type: "outage"},
{ start_date: "2017-07-20 10:00", end_date: "2017-08-30 16:00", text:"Task A-89411", empId:1673, color: 'white', type: "forecast"},
{ start_date: "2017-06-30 12:00", end_date: "2017-07-12 20:00", text:"Task B-48865", empId:1473, color: 'white',type: "outage"},
{ start_date: "2017-07-27 16:30", end_date: "2017-08-24 18:00", text:"Task B-46558", empId:1473, color: 'white', type: "forecast"},
{ start_date: "2017-06-30 08:00", end_date: "2017-08-01 12:00", text:"Task C-32421", empId:1677, color: 'white', type: "outage"},
{ start_date: "2017-08-12 14:30", end_date: "2017-09-28 16:45", text:"Task C-14244", empId:1677, color: 'white', type: "forecast"}
],"json");
scheduler.attachEvent("onEventCollision", function (ev, evs){
console.log($('div[event_id='+ev.id+']'));
console.log(evs);
setTimeout(function(){ $('div[event_id='+ev.id+']').addClass('overlapEle'); }, 3000);
//setTimeout(function() {$('div[event_id='+ev.id+']').addClass('overlapEle');}, 100);
alert('Task Overlapped');
return false;
});
//////////////////
}
render() {
console.log('data '+JSON.stringify(this.props.data));
return (
This works fine when included it using script tag
<!doctype html>
Configuring the time scale (X-Axis) html, body{ margin:0px; padding:0px; height:100%; overflow:hidden; } .one_line{ white-space:nowrap; overflow:hidden; padding-top:5px; padding-left:5px; text-align:left !important; } .customTask{ height: 90% !important; top: 0px !important; color: #333 !important; } .outageele{ border: 2px solid green; } .forecastele{ border: 2px solid orange; }