hi ,
i use the dhtmlxScheduler Timeline with a external drag and drop Component but the section_id
will not be displayed , it is displayed just last section id , i don’t know why ? and also the time is not right during drop .
Thanks for your time and your help!
hier my Code :
<!doctype html>
Integration with dhtmlxTree html, body {
margin: 0px;
padding: 0px;
height: 100%;
overflow: hidden;
}
#scheduler_here {
background-color: white;
border-left: 1px solid #EBE9E9;
border-right: 1px solid #EBE9E9;
}
</style>
<script type="text/javascript" charset="utf-8">
function init() {
if (!window.dhtmlXTreeObject) {
alert("Sample requires dhtmlxTree");
return;
}
scheduler.locale.labels.timeline_tab = "Timeline";
scheduler.locale.labels.section_custom = "Section";
scheduler.config.details_on_create = false;
scheduler.config.details_on_dblclick = false
scheduler.config.xml_date = "%Y-%M-%D %H:%i";
//===============
//Configuration
//===============
var sections = [
{key: 1, label: "James Smith"},
{key: 2, label: "John Williams"},
{key: 3, label: "David Miller"},
{key: 4, label: "Linda Brown"},
{key: 5, label: "Linda Brown2"}
];
scheduler.createTimelineView({
name: "timeline",
x_unit: "minute",
x_date: "%H:%i",
x_step: 60,
x_size: 10,
x_start: 10,
x_length: 4,
y_unit: sections,
y_property: "section_id",
render:"bar"
});
//===============
//Data loading
//===============
scheduler.init( 'scheduler_here', new Date(), "timeline" );
dhtmlx.message( "Drag-and-drop an item from the tree to the scheduler to create an event" );
}
$(function() {
$('.drag li').on('dragstart', function(e){
e.originalEvent.dataTransfer.setData( "dXX" , e.target.id );
});
$('#scheduler_here').on( 'dragover' , function(e){
e.preventDefault();
});
$('#scheduler_here').on( 'drop' , function(e ){
e.preventDefault();
var p = e;
var info = scheduler.getActionData(e);
alert( info.date )
alert( info.section )
scheduler.parse({ start_date: info.date , section_id: info.section });
scheduler.parse([
{ start_date: info.date , end_date: "2009-06-30 12:00", text: "Task A-12458", section_id: 2}
], "json");
});
});
<div id="scheduler_here" class="dhx_cal_container" style='width:1000px; height:100%; position:absolute; top:0px; left:250px'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
<div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>
<div style="position:absolute; top:80px; left:40px;">
<ul class="drag">
<li id="d1" draggable="true">Item 1 to drag</li>
<li id="d2" draggable="true">Item 2 to drag</li>
<li id="d3" draggable="true">Item 3 tp drag </li>
</ul>
</div>