Holiday Cuts Tasks

[Mark]

Hello,

With the Gantt chart, if the task doesn't run all the way through a holiday period, the task is cut into parts.  How do you prevent this?  Please see the below code and result.

    function loadGantt(){

        var GanttData = [

            { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('08/02/2022'), EndDate: new Date('04/21/2023'), },

            { TaskID: 2, TaskName: 'Project SoilSample', StartDate: new Date('08/02/2022'), EndDate: new Date('09/21/2022'), },

            { TaskID: 3, TaskName: 'Project Initiation', StartDate: new Date('09/02/2022'), EndDate: new Date('04/21/2023'), },

            { TaskID: 4, TaskName: 'Project Initiation', StartDate: new Date('08/30/2022'), EndDate: new Date('11/02/2022'), },

        ];

   

        if (!document.querySelector('#potato_gantt').classList.contains('e-gantt')) {  

            ganttChart = new ej.gantt.Gantt({

                dataSource: GanttData,

                query: chartQuery,

                height: height,

                allowSelection: true,

                taskFields: {

                    id: 'TaskID',

                    name: 'TaskName',

                    startDate: 'StartDate',

                    endDate: 'EndDate',

                },

                timelineSettings: {

                    timelineViewMode:'Month',

                    topTier: {

                        format: 'yyyy',

                        unit: 'Year'

                    },

                    bottomTier: {

                        format: 'MMM',

                        unit: 'Month'

                    }

                },

                holidays: [{

                    from: "09/01/2022",

                    to:"11/01/2022",

                    label: "FY Closeout",

                    cssClass:"e-custom-holiday"

                   

                },

                ],

            });

            ganttChart.appendTo('#potato_gantt');

        }

    }

[Premkumar Sudalaimuthu]

Hi Mark ,

We couldn’t understand your query. We do not see any tasks cut into two parts in your shared image. We have attached a sample that renders on the holiday and it will not get cut into two parts. We request you to elaborate on your requirement and it will be helpful for us to provide you with a better solution.

sample: https://stackblitz.com/edit/pcbg63?file=index.js

Regards,

Premkumar S

[Mark]

Let me clarify as I didn't say two parts, but gets cut into parts, i.e. not showing its full length:

• Any task that has a date the ends in the holiday period only shows a blue part up to the start of the holiday.
  • Specifically:
    • { TaskID: 2, TaskName: 'Project SoilSample', StartDate: new Date('08/02/2022'), EndDate: new Date('09/21/2022'), },
      
  • The expected output would be:
    
    • 
      
• Any task that has a date that starts in the holiday period only shows a blue part at the end of the holiday.
  • Specifically:
    • { TaskID: 3, TaskName: 'Project Initiation', StartDate: new Date('09/02/2022'), EndDate: new Date('04/21/2023'), },
      
  • The expected output would be:
    
    • 
      

Your stackblitz does the exact same issue. As long as the task goes across the holiday, it shows over it, but if the task starts or ends in the holiday, it gets chopped off.

Does this help clarify the issue or did I make it more confusing?

[Premkumar Sudalaimuthu]

Hi Mark ,

We hope your requirement was to render the taskbar start date on holiday. The default behavior of Gantt Chart taskbar is if the mapped startdate of the task is a holiday, the taskbar will render the start date on the next day of the holiday, and if the end date is a holiday, the taskbar will render the end date before the mapped enddate. It is not possible to achieve your requirement of rendering startdate of the taskbar on the holiday as per our current implementation.

Regards,

Premkumar S

[Mark]

Thank you for the response. Is there a way to emulate a holiday via queryCellInfo or such or is there another function that exists so that you can create a column in the background across the tasks but show the event starting and ending in the column? Our teams work through these periods and we need to show that and if the task starts or ends in the holiday we need to show that for billing demonstrations, etc.

[Premkumar Sudalaimuthu]

Hi Mark ,

We suggest you to use scheduling mode for achieve your requirement of rendering startdate and enddate of the task on the holidays. We can achieve the behavior by mapping the manual property in taskfields and datasource. We have shared the sample , code snippets and online documentation for task scheduling mode. Please contact us if you need any further assistance.

Code snippets:

 

taskFields: {

    id: 'TaskID',

    name: 'TaskName',

    startDate: 'StartDate',

    duration: 'Duration',

    progress: 'Progress',

    endDate: 'EndDate',

    dependency: 'Predecessor',

    child: 'Children',

    manual: 'isManual',

  },

 

 

Datasource.ts

 

 

{

    TaskID: 1,

    TaskName: 'Parent Task 1',

    StartDate: new Date('02/27/2017'),

    EndDate: new Date('03/03/2017'),

    Progress: '40',

    isManual: true,

  },

Sample: https://stackblitz.com/edit/haoybb?file=index.ts

Online documentation: https://ej2.syncfusion.com/documentation/gantt/task-scheduling/

Regards,

Premkumar S

[Mark]

Awesome and thank you!

[Ranjani Prabakaran]

You are welcome, Mark. Please get back to us if you need any further assistance.