Hello all, im working on an Asp.net MVC application using the Dhtmlx Scheduler.
I have a lot of data for my Y_Axis, which does not fit in a single div containing the scheduler.
I have items, being dropped into the scheduler, but It doesn’t seem to auto-scroll when tring to drop an item.
I tried to create a JQuery function to solve this problem, but to my luck, it doesn’t seem to be working.
Any help would be greatly appreciated!
the Divs:
<div id="upperSchedule" ondragover="allowDrop(event)"></div>
<div id="scheduler_here" ondragover="allowDrop(event)" ondrop="drop(event)" class="dhx_cal_container" >
<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>
<input type="button" id="save" value="save" onclick="save()">
<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>
<textarea id="data" name="data">
@ViewBag.xml;
</textarea>
@* ReSharper disable once StatementIsNotTerminated *@
<script type="text/javascript">
var engineers = @Html.Raw(Json.Encode(ViewBag.engineers))
var statuses = @Html.Raw(Json.Encode(ViewBag.statusList))
scheduler.locale.labels.timeline_tab = "Timeline";
scheduler.locale.labels.timeline2_tab = "Timeline2";
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.limit_view = false;
scheduler.config.mark_now = false;
var colors = [
{ key: 'Black', label: 'Black' },
{ key: 'Red', label: 'Red' },
{ key: 'DarkGreen', label: 'Green' },
{ key: 'Orange', label: 'Orange' },
{key: 'Blue', label: 'Blue'}
];
scheduler.config.lightbox.sections = [
{ name: "description", height: 43, map_to: "text", type: "textarea", focus: true },
{ name: "color", height: 20, type: "select", options: colors, map_to: "color" },
{ name: "status", height: 20, type: "select", options: statuses, map_to: "status"},
{ name: "time", height: 72, type: "time", map_to: "auto" }
];
scheduler.createTimelineView({
name: "timeline",
x_unit: "minute",
x_step: 30,
x_start: 16,
x_date: "%H:%i",
x_size: 24,
x_length: 48,
y_unit: engineers,
event_dy: 'full',
y_property: "engineer_id",
render: "bar"
});
//Data to save when writing to XML
scheduler.data_attributes = function () {
return [
["id"], ["start_date", scheduler.templates.xml_format], ["end_date", scheduler.templates.xml_format], ["text"],
["engineer_id"], ["color"], ["status"]
];
};
scheduler.attachEvent("onAfterLightbox", function(){
setToolTip();
save();
var events = scheduler.getEvents();
});
scheduler.attachEvent("onYScaleClick", function (index, section, e) {
setToolTip();
});
scheduler.attachEvent("onLimitViolation", function (id, obj) {
alert("This is not a valid time period.");
});
scheduler.attachEvent("onEmptyClick", function (date, e){
var info = scheudler.getActionData(e);
alert(info.section);
});
//Days: monday - friday, Zones/Hours: 7pm - 12am
scheduler.blockTime({
days: [1, 2, 3, 4, 5],
zones: [19 * 60, 24 * 60],
sections: {
timeline: [020602, 010201, 1406210621679]
}
});
scheduler.init("scheduler_here", new Date(), "timeline");
function save() {
var url = "/Home/Save"
var xml = scheduler.toXML();
$.ajax({
url: url,
type: "POST",
dataType: 'json',
async: false,
data: "{'xmlString':'" + xml + "' }",
contentType: 'application/json; charset=utf-8',
//success: alert("File Saved in C:\\ Drive as Tasks.xml")
});
}
scheduler.parse(document.getElementById("data").value, "xml");
</script>
</div>
<div id="lowerSchedule" ondragover="allowDrop(event)"></div>JQuery Function:
function allowDrop(e) {
e.preventDefault();
e.stopPropagation();
document.getElementById("scheduler_here").scrollIntoView();
}
function drop(e) {
var p = e;
var info = scheduler.getActionData(e);
scheduler.addEventNow({ start_date: info.date, engineer_id: info.section });
document.getElementById("scheduler_here").scrollIntoView();
}
$("#upperSchedule").droppable({
over: function(event, ui){
$("#scheduler_here").autoscroll({
direction: "up",
step: 150,
scroll: true
});
},
out: function(event, ui){
$("#scheduler_here").autoscroll("destroy");
}
});
$("#lowerSchedule").droppable({
over: function(event, ui){
alert("over");
$("#scheduler_here").autoscroll({
direction: "down",
step: 150,
scroll: true
});
},
out: function(event, ui){
$("#scheduler_here").autoscroll("destroy");
}
});