I need both autoscheduling and baseline display on timeline.
Somehow I am not seeing the baseline on the timeline.
My config :
gantt.addTaskLayer(function draw_planned(task) {
if (task.planned_start && task.planned_end) {
var sizes = gantt.getTaskPosition(task, task.planned_start, task.planned_end);
var el = document.createElement(‘div’);
el.className = ‘baseline’;
el.style.left = sizes.left + ‘px’;
el.style.width = sizes.width + ‘px’;
el.style.top = sizes.top + gantt.config.task_height + 13 + ‘px’;
return el;
}
return false;
});
gantt.templates.task_class = function (start, end, task) {
if (task.planned_end) {
var classes = ['has-baseline'];
if (end.getTime() > task.planned_end.getTime()) {
classes.push('overdue');
}
return classes.join(' ');
}
};
gantt.templates.rightside_text = function (start, end, task) {
if (task.planned_end) {
if (end.getTime() > task.planned_end.getTime()) {
var overdue = Math.ceil(Math.abs((end.getTime() - task.planned_end.getTime()) / (24 * 60 * 60 * 1000)));
var text = "<b>Overdue: " + overdue + " days</b>";
return text;
}
}
};
gantt.config.xml_date="%Y-%m-%dT00:00:00";
gantt.locale.labels.section_baseline = "Planned";
gantt.config.columns = [
{name:"index", label:'', width:"120", tree:true, readOnly:true},
{name:"text", label:"Task name", width:"*" },
{name:"start_time", label:"Start time", template:function(obj){
return gantt.templates.date_grid(obj.start_date);
}, align: "center", width:80 },
{name:"end_time", label:"End time", template:function(obj){
var day = obj.end_date.getDay();
var end_date = obj.end_date;
if (day == 6) end_date.setDate(end_date.getDate() + 2);
if (day == 0) end_date.setDate(end_date.getDate() + 1);
return gantt.templates.date_grid(obj.end_date);
}, align: "center", width:80 },
{name:"duration", label:"Task name", width:"*", hide:true },
{name:"planned_start", hide:true },
{name:"planned_end", hide:true }
];
gantt.config.task_height = 16;
gantt.config.row_height = 40;
gantt.config.auto_scheduling = true;
gantt.config.auto_scheduling_strict = true;
gantt.config.auto_scheduling_initial = false;
gantt.config.work_time = true;
gantt.config.correct_work_time = true;
gantt.locale.labels.baseline_enable_button = 'Set';
gantt.locale.labels.baseline_disable_button = 'Remove';
gantt.config.lightbox.sections=[
{name:"description", height:70, map_to:"text", type:"textarea", focus:true},
{name:"time", height:72, map_to:"auto", type:"time"},
{name: "baseline", map_to: { start_date: "planned_start", end_date: "planned_end"}, type: "time"}
];
gantt.config.grid_width = 500;
gantt.config.date_grid = "%m/%d/%Y";
gantt.config.scale_height = 60;
var weekScaleTemplate = function(date){
var dateToStr = gantt.date.date_to_str("%d %M");
var weekNum = gantt.date.date_to_str("(week %W)");
var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
return dateToStr(date) + " - " + dateToStr(endDate) + " " + weekNum(date);
};
gantt.config.subscales = [
{unit:"month", step:1, date:"%F, %Y"},
{unit:"week", step:1, template:weekScaleTemplate}
];
gantt.init("gantt_here");
gantt.attachEvent("onTaskLoading", function (task) {
task.planned_start = gantt.date.parseDate(task.planned_start, "xml_date");
task.planned_end = gantt.date.parseDate(task.planned_end, "xml_date");
return true;
});
I have defined the css for baseline too…
what am i missing ?