Zoom Extension

Read details about the Zoom extension in the article Zooming.
The zoom object possesses the following API:

Methods

  • init(zoomConfig) - to enable the module. The method takes a zoomConfig object with configuration settings that contains the levels array of zooming levels and a number of additional properties:
    • levels - (array) obligatory, an array of zooming levels, each of which includes the following properties:
      • name - (string) the name of the level
      • scale_height - (number) the height of the scale
      • min_column_width - (number) the minimal width of a column
      • scales - (array) an array of scales to switch between while zooming in/out on this level
    • handler - (Event) allows specifying a custom handler of the mouse wheel to work with zooming manually
    • startDate - (Date) the start value of the time scale zooming
    • endDate - (Date) the end value of the time scale zooming
    • activeLevelIndex - (number) the number of the default active level
    • widthStep - (number) the step of increasing/decreasing the width of scale while switching to the next/previous zooming level
    • minColumnWidth - (number) the minimal width of a column that allows switching to the previous zooming level
    • maxColumnWidth - (number) the maximal width of a column that allows switching to the next zooming level
    • useKey - (string) the key that enables zooming by scrolling the mouse wheel:"ctrlKey" | "altKey" | "shiftKey"
    • trigger - the trigger of zooming: "wheel" | null | undefined
    • element - (HTMLElement|function) a DOM element over which zooming is triggered or a function that returns a DOM element

These are two examples of setting zoom configuration:

var zoomConfig = {
    levels: [
      {
        name:"day",
        scale_height: 27,
        min_column_width:80,
        scales:[
            {unit: "day", step: 1, format: "%d %M"}
        ]
      },
      {
         name:"week",
         scale_height: 50,
         min_column_width:50,
         scales:[
          {unit: "week", step: 1, format: function (date) {
           var dateToStr = gantt.date.date_to_str("%d %M");
           var endDate = gantt.date.add(date, -6, "day");
           var weekNum = gantt.date.date_to_str("%W")(date);
           return "#" + weekNum + ", " + dateToStr(date) + " - " + dateToStr(endDate);
           }},
           {unit: "day", step: 1, format: "%j %D"}
         ]
       },
       {
         name:"month",
         scale_height: 50,
         min_column_width:120,
         scales:[
            {unit: "month", format: "%F, %Y"},
            {unit: "week", format: "Week #%W"}
         ]
        },
        {
         name:"quarter",
         height: 50,
         min_column_width:90,
         scales:[
          {unit: "month", step: 1, format: "%M"},
          {
           unit: "quarter", step: 1, format: function (date) {
            var dateToStr = gantt.date.date_to_str("%M");
            var endDate = gantt.date.add(gantt.date.add(date, 3, "month"), -1, "day");
            return dateToStr(date) + " - " + dateToStr(endDate);
           }
         }
        ]},
        {
          name:"year",
          scale_height: 50,
          min_column_width: 30,
          scales:[
            {unit: "year", step: 1, format: "%Y"}
        ]}
    ]
};
 
gantt.ext.zoom.init(zoomConfig);
 
 
// or, in a more simple way levels can be presented as scale arrays
var zoomConfig = {
    levels: [
        [
            { unit: "month", format: "%M %Y", step: 1},
        ],
        [
            { unit: "month", format: "%M %Y", step: 1},
            { unit: "day", format: "%d %M", step: 1}
        ],
        [
            { unit: "day", format: "%d %M", step: 1},
            { unit: "hour", format: hourRangeFormat(12), step: 12}
        ],
        [
            {unit: "day", format: "%d %M",step: 1},
            {unit: "hour",format: hourRangeFormat(6),step: 6}
        ],
        [
            { unit: "day", format: "%d %M", step: 1 },
            { unit: "hour", format: "%H:%i", step: 1}
        ]
    ]
}
 
gantt.ext.zoom.init(zoomConfig);
  • getCurrentLevel() - returns the number (index) of the current zooming level
gantt.ext.zoom.getCurrentLevel();
  • setLevel(level) - switches to the specified zooming level. The level is defined either by a string (the name of the level from the config, e.g. "year"), or by its number in the array of levels
gantt.ext.zoom.setLevel("year");
  • zoomIn() - increases the current zooming level
gantt.ext.zoom.zoomIn();

For the same purpose you can also use:

gantt.ext.zoom.setLevel(zoom.getCurrentLevel() - 1)
  • zoomOut() - decreases the current zooming level
gantt.ext.zoom.zoomOut();

For the same purpose you can also use:

gantt.ext.zoom.setLevel(zoom.getCurrentLevel() + 1)

Events

  • onAfterZoom - fires during switching of the zooming level

Arguments:

  • level - the number of the level
  • config - the config of the level
gantt.ext.zoom.attachEvent("onAfterZoom", function(level, config){ 
    document.querySelector(".gantt_radio[value='" +config.name+ "']").checked = true;
});
Back to top