Is it possible to apply a background color to any date?

[Akira Kume]

Hi,

Is it possible to apply a background color to any date?

I know that setting holidays allows me to apply background colors using CSS, but I want to set background colors without defining holidays.

I'm looking for something like the weekend when `includeWeekend={true}` is set.

[Sridharan Jayabalan]

Hi Akira,

Greetings from Syncfusion.

Currently, the Gantt chart does not provide a built-in property to apply background colors to arbitrary dates (similar to weekends with includeWeekend={true}) without defining them as holidays. However, you can achieve this through customization approach using the dataBound event and CSS styles. 

• Use the dataBound event to calculate the position of the target date based on projectStartDate and perDayWidth.

• Create a custom element (e.g., a div) and append it to the ".e-nonworking-day-container" to overlay the background color.

• Apply CSS styling to define the color and positioning.

Code-Snippet:   

index.js:-

function Editing() {

  let ganttChart;

  function dataBound(args) {

    var today = new Date('04/10/2019'); // pass dates here

    var diff = Math.floor(

      (today.getTime() - ganttChart.projectStartDate.getTime()) / (1000 * 3600 * 24)

    );

    var todayleft = diff * ganttChart.perDayWidth;

    var element = document.createElement('div');

    element.className = 'today';

    element.style.left = todayleft + 'px';

    element.style.height = ganttChart.contentHeight + 'px';

    element.style.width = ganttChart.perDayWidth + 'px';

    document.getElementsByClassName('e-nonworking-day-container')[0].appendChild(element);

  }

  return (

    <div className="control-pane">

      <div className="control-section">

        <GanttComponent

          id="Editing"

          dataBound={dataBound.bind(this)}

        >

          <Inject services={[Edit, Selection, Toolbar, DayMarkers]} />

        </GanttComponent>

      </div>

    </div>

  );

}

index.html:-

    <style>

        .today {

            top: 0px;

            position: absolute;

            background: pink;

        }

    </style>

 

Sample - https://stackblitz.com/edit/react-scaiuz-dnneaucj?file=index.js,index.html

 

 

Regards,

Sridharan

[Akira Kume]

In my project, there are functions to zoom in and out, and to change the projectStartDate and projectEndDate. However, after performing these actions, the background color does not set to the correct date.

I believe a process to reset the background color is necessary. What event would be appropriate for performing this background color reset?

[Ajithkumar Gopalakrishnan]

Hi Akira,

We have reviewed the shared details on our end. Initially, non-working days were highlighted correctly during the initial load. However, when performing zoom actions, the timeline is modified, but the dataBound event is not triggered again. As a result, the previous styles remain in the UI, causing a mismatch in highlighting on the Gantt chart.

We have now modified the workaround so that non-working days are properly highlighted during both the initial load and zoom actions. Currently, we suggest using the dataBound, load, and actionComplete events in the Gantt chart.

• When the initial render occurs, the load and dataBound events will trigger, allowing you to apply the highlight.
• When zoom actions are performed, the actionComplete event will trigger, and the same customization can be applied for highlighting.

We have attached the modified code snippet and sample for your reference:

<GanttComponent

          id="Editing"

          ....

          dataBound={dataBound.bind(this)}

          load={load.bind(this)}

          actionComplete={actionComplete.bind(this)}

        >

        ...

</GanttComponent>

function dataBound(args)

{

    if (isLoad)

    {

        applyHighlightDates();

        isLoad = false;

    }

}

function load(args)

{

    isLoad = true;

}

function actionComplete(args)

{

    if (args.requestType == "AfterZoomIn" || args.requestType == "AfterZoomToProject" || args.requestType == "AfterZoomOut")

    {

        applyHighlightDates();

    }

}

function applyHighlightDates()

{

    const highLightsContainer =

    ganttChart.element.querySelector('.e-weekend-container');

    if (highLightsContainer)

    {

        // Remove only previously added custom highlights

        highLightsContainer

          .querySelectorAll('.custom-highlight')

          .forEach((el) => el.remove());

        highLightDates.forEach((dateStr) =>

        {

            const date = new Date(dateStr);

            const left = ganttChart.dataOperation.getTaskLeft(date, false);

 

            const dummy = document.createElement('div');

            dummy.className = 'e-weekend custom-highlight'; // Add custom class

            dummy.style.cssText = `left: ${ left}

            px; width: ${ highLightsContainer.children[0].style.width} // already rendered weekend highlight style

            ; height: ${ highLightsContainer.children[0].style.height}

            ;`;

            dummy.style.background = 'pink';

            highLightsContainer.appendChild(dummy);

        });

    }

}

Modified sample link: https://stackblitz.com/edit/react-scaiuz-wwjpt78b?file=index.js,index.html



For more information, you may refer to the following link:

https://ej2.syncfusion.com/react/documentation/api/gantt/index-default#actioncomplete
https://ej2.syncfusion.com/react/documentation/api/gantt/index-default#databound
https://ej2.syncfusion.com/react/documentation/api/gantt/index-default#load

If you have any further questions or need additional assistance, please let me know!

Regards,
Ajithkumar G

[Akira Kume]

Thanks to the code you provided, I think I can implement it successfully.

Thank you.

[Deepika Sekar]

Hi Akira,

Thanks for the update! Please get back to us if you need any further assistance.

Regards,

Deepika S