gantt v7.1
Sometimes I get the following error:
“Invalid zoom level for gantt.ext.zoom.setLevel. day is not an expected value.”
Hello Ayman,
Gantt can show that error message if you don’t have the "day" name in the zoom configuration, then try to change the zoom level with the gantt.ext.zoom.setLevel("day") command:
https://snippet.dhtmlx.com/phdfsuty
thanks, @ramil , Is it allowed to use the same level name for different scales?
like this level config: (please note year!)
levels: [
{
name: “day”,
scale_height: 27,
scales: [{ unit: “day”, step: 1, format: “%d %M” }],
},
{
name: “week”,
scale_height: 50,
scales: [
{
unit: “week”,
step: 1,
format: function (date) {
var dateToStr = gantt.date.date_to_str(“%d %M”);
function dateToStrShaper(dateObj) {
return dateToStr(dateObj)
.split(" “)
.reduce((x, y) => y.concat(x));
}
var endDate = gantt.date.add(date, -6, “day”);
var weekNum = gantt.date.date_to_str(”%W")(date);
return “#” + weekNum + “, " + language === “en”
? dateToStr(date)
: dateToStrShaper(date) + " - " + language === “en”
? dateToStr(endDate)
: dateToStrShaper(endDate);
},
},
{ unit: “day”, step: 1, format: “%j %D” },
],
},
{
name: “month”,
scale_height: 50,
scales: [
{ unit: “month”, step: 1, format: “%F, %Y” },
{
unit: “week”,
step: 1,
format: function (date) {
var dateToStr = gantt.date.date_to_str(”%d %M");
function dateToStrShaper(dateObj) {
return dateToStr(dateObj)
.split(" “)
.reduce((x, y) => y.concat(x));
}
var endDate = gantt.date.add(
gantt.date.add(date, 1, “week”),
-1,
“day”
);
return language === “en”
? dateToStr(date) + " - " + dateToStr(endDate)
: dateToStrShaper(date) + " - " + dateToStrShaper(endDate);
},
},
],
},
{
name: “quarter”,
height: 50,
scales: [
{
unit: “quarter”,
step: 3,
format: function (date) {
var dateToStr = gantt.date.date_to_str(”%M %y");
var endDate = gantt.date.add(
gantt.date.add(date, 3, “month”),
-1,
“day”
);
return dateToStr(date) + " - " + dateToStr(endDate);
},
},
{ unit: “month”, step: 1, format: “%M” },
],
},
{
name: “year”,
scale_height: 50,
scales: [
{
unit: “year”,
step: 5,
format: function (date) {
var dateToStr = gantt.date.date_to_str(“%Y”);
var endDate = gantt.date.add(
gantt.date.add(date, 5, “year”),
-1,
“day”
);
return dateToStr(date) + " - " + dateToStr(endDate);
},
},
],
},
{
name: “year”,
scale_height: 50,
scales: [
{
unit: “year”,
step: 100,
format: function (date) {
var dateToStr = gantt.date.date_to_str(“%Y”);
var endDate = gantt.date.add(
gantt.date.add(date, 100, “year”),
-1,
“day”
);
return dateToStr(date) + " - " + dateToStr(endDate);
},
},
{
unit: “year”,
step: 10,
format: function (date) {
var dateToStr = gantt.date.date_to_str(“%Y”);
var endDate = gantt.date.add(
gantt.date.add(date, 10, “year”),
-1,
“day”
);
return dateToStr(date) + " - " + dateToStr(endDate);
},
},
],
},
]
Hello Ayman,
It is possible to set the same name for the zoom levels. You will be able to switch between the levels with the mouse wheel and the zoomIn and zoomOut methods. But if you use the setLevel method and specify the "year" value, Gantt will choose the first level in the levels array.
You can check how it works in the following snippet:
https://snippet.dhtmlx.com/6k7f5w1j