I understand that we can update events on the calender using ajax requests.
Our business scenario wants the calender to be updated for each date change to show only set of resources who has availability for that particular date. Is there way to dynamically change the units view columns and their events and mark time using Ajax calls?
Hi,
There is no built-in means for dynamic loading of units view sections and marked timespans.
However, it is doable via client side api.
Check this post, describing similar case (loading timeline sections)
viewtopic.php?f=25&t=34592
Updated demo:
s3.amazonaws.com/uploads.hipcha … Reload.zip
Marked timespan can be loaded in a same way (you can return JSON array from the server) and added with following methods:
docs.dhtmlx.com/scheduler/api__s … espan.html
docs.dhtmlx.com/scheduler/api__s … espan.html
scheduler.deleteMarkedTimespan();//remove previously added timespans
scheduler.addMarkedTimespan( .. config object ..);
Thank you for the examples. In my scenario, I need to update both events on the calender and timespans using ajax for unitsview. Please find my code below. When I use the below code,
scheduler.attachEvent("onViewChange", function (new_mode, new_date)
{scheduler.attachEvent is being called twice. I could not find why. I suspect that
scheduler.updateCollection("ajax_options", response);
could have something to do with it, but not sure why or how to handle this issue so that I can have only a single call to onViewChange instead of two. Could you please help me with this issue.
var scheduler = new DHXScheduler(this);
scheduler.Config.separate_short_events = false;
var line = new UnitsView("resourceView", "resourceId");
line.ServerList = "ajax_options";
scheduler.Views.Add(line);
scheduler.TimeSpans.Add(new DHXMarkTime()
{
StartDate = DateTime.Now,
EndDate = DateTime.Now.AddHours(2),
CssClass = "schedule_worktime",
Sections = new List<Section>()
{
new Section("resourceView", new string[] {"1147"}), //test case
}
}
);
scheduler.BeforeInit.Add("configure();");
scheduler.BeforeInit.Add("someMethodss();");
//scheduler.BeforeInit.Add("limitEditing();");
scheduler.LoadData = true;
scheduler.EnableDataprocessor = true;
scheduler.EnableDynamicLoading(SchedulerDataLoader.DynamicalLoadingMode.Day);<script type="text/javascript">
function configure() {
scheduler.attachEvent("onBeforeViewChange", function (old_mode, old_date, mode, date) {
var toStr = scheduler.date.date_to_str("%d-%m-%Y");
var start = scheduler.date[mode + "_start"](new Date(date));
var end = scheduler.date.add(start, 1, mode);
//if in timeline mode and changing dates
if (mode == "resourceView" && (old_date.valueOf() != date.valueOf() || old_mode != "resourceView")) {
$.ajax({
dataType: "json",
type: 'POST',
url: app.sections_url,
data: {
from: toStr(start),
to: toStr(end)//stringify dates
},
success: function (response) {
scheduler.updateCollection("ajax_options", response);
}
});
}
return true;
});
}
function someMethodss() {
scheduler.attachEvent("onViewChange", function (new_mode, new_date) {
var toStr = scheduler.date.date_to_str("%d-%m-%Y");
var start = scheduler.date[new_mode + "_start"](new Date(new_date));
var end = scheduler.date.add(start, 1, new_mode);
//if in timeline mode and changing dates
if (new_mode == "resourceView")//&& (old_date.valueOf() != date.valueOf() || old_mode != "resourceView"))
{
alert(new_mode + " " + new_date);
$.ajax({
dataType: "json",
type: 'POST',
url: "@Url.Action("WorkingTime")",
data: {
from: toStr(start),
to: toStr(end)//stringify dates
},
success: function (result) {
$.each(result, function(index, value) {
scheduler.addMarkedTimespan(
{
start_date: new Date(parseInt(value.start_date.substr(6))),
end_date: new Date(parseInt(value.end_date.substr(6))),
css: "schedule_worktime",
html: "Working",
type: "ajax_timespan",
sections: { resourceView: value.resourceId.toString() }
});
});
scheduler.updateView();
}
});
}
return true;
});
}
</script>