0

I have a requirement to display custom date range filters in DHTMLX gantt chart. The values of that filter will be as follows:

Last Year
Current Year
Last 6 Months
Last 2 Quarters
Next Year

When user clicks on any option, the chart will be filtered out based on that.

Here is my HTML:

<script src="https://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.js?v=6.0.0"></script>
<link rel="stylesheet" href="https://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.css?v=6.0.0">

        
        <div style='height:20px; padding:5px;'>
            <div class="filters_wrapper" id="filters_wrapper">
                
                Search Projects:
                <input type="text" name="a12" value="" id="a12" oninput='gantt.$doFilter(this.value)' style="width: 100px;"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                
                
            </div>
        </div>
        <style>
       
        </style>
        <div id="gantt_here" style="width:100%; height:100%;"></div>
        <style type="text/css" media="screen">
            html, body { margin:0px; padding:0px; height:100%; overflow:hidden; }
        </style>

Javascript:

 var tasks = {data:[
    {id:1, text: "Development", start_date: "01-05-2025", duration: 5, "progress": 0.5},
    {id:2, text: "Coding", start_date: "01-05-2025", duration: 2, parent: 1, "progress": 0.5},
    {id:3, text: "Bug fixing", start_date: "12-05-2023", duration: 2, parent: 1, "progress": 0.8},
    {id:4, text: "Feature development", start_date: "05-05-2025", duration: 5, parent: 1, "progress": 0.45}
]}; 


gantt.config.columns = [
    {name: "text", label:"Text" , tree: true, width: 100},
    {name: "start_date", label: "Start time", align: "center",  width: 160} ,
    {name: "end_date", label: "End time", align: "center",  width: 160} ,
  
];

gantt.config.open_tree_initially = true;
        gantt.plugins({ 
            tooltip: true 
        }); 
        var filterValue = "";
        var delay;
        gantt.$doFilter = function(value){
            filterValue = value;
            clearTimeout(delay);
            delay = setTimeout(function(){
                gantt.render();
                gantt.$root.querySelector("[data-text-filter]").focus();
                
            }, 200)
        };
      
        
        var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
        var markerId = gantt.addMarker({  
            start_date: new Date(), 
            css: "today", 
            text: "Now", 
            title: dateToStr(new Date()) 
        });
        gantt.getMarker(markerId); //->{css:"today", text:"Now", id:...}
        
        gantt.attachEvent("onTaskLoading", function(task){
            task.$open = true;
            return true;
        }); 
        
        
        gantt.init("gantt_here");
        gantt.parse(tasks);
      
        gantt.attachEvent("onBeforeTaskDisplay", function(id, task){
            if(!filterValue) return true;
            
            var normalizedText = task.text.toLowerCase();
            var normalizedValue = filterValue.toLowerCase();
            return normalizedText.indexOf(normalizedValue) > -1;
            if (compare_input(id)) {
        return true;
    }
    return false;
        });

Can anyone please let me know how to get the above mentioned custom date range filters in the DHTMLX Gantt chart

1 Answer 1

0

To change the displayed date range, you need to use the gantt.config.start_date and gantt.config.end_date parameters:

https://docs.dhtmlx.com/gantt/api__gantt_start_date_config.html

Here is a simple example:

https://snippet.dhtmlx.com/5/9f6871291

Here is the snippet with the buttons:

http://snippet.dhtmlx.com/5/ff3649b9d

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.