Today Line

JackJack

Hi all,
Is it possible to implement a reference line to mark the current date ('Today') on the timeline?

Thank you for all your hardwork! Its really2 great

Bryan-Herrera-DEV

Yeah!, but u need modificate source code of svar gantt, specifically in the Chart.js file

const todayLeft = useMemo(() => {
    if (!scales || !scales.rows || !scales.rows.length) return null;
    const row = scales.rows[scales.rows.length - 1];
    if (!row.cells || !row.cells.length) return null;

    const today = new Date();
    today.setHours(0, 0, 0, 0);

    let offset = 0;

    for (const cell of row.cells) {
      const cellDate = new Date(cell.date);
      cellDate.setHours(0, 0, 0, 0);
      if (cellDate.getTime() === today.getTime()) {
        return offset + cell.width / 2;
      }
      offset += cell.width;
    }
    return null;
  }, **[scales]);**

{todayLeft !== null && (
          <div
            className="wx-mR7v2Xag wx-today-line"
            style={{
              position: 'absolute',
              top: 0,
              height: '100%',
              width: '2px',
              left: `${todayLeft}px`,
              backgroundColor: '#F90',
              zIndex: 10,
              pointerEvents: 'none',
            }}
          >
            <div
              style={{
                position: 'absolute',
                top: '15px',
                left: '0px',
                backgroundColor: '#F90',
                borderTopRightRadius: '8px',
                borderBottomRightRadius: '8px',
                height: '1.5rem',
                width: '2.412rem',
                fontSize: '12px',
                padding: '5px 10px 5px 10px',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                alignContent: 'center'
              }}
            >
              <p
                style={{
                  fontSize: '0.75rem',
                  color: '#fff',
                  lineHeight: '0!important',
                  margin: '0!important'
                }}
              >
                HOY
              </p>
            </div>
          </div>
        )}
``` 
Both parts are in the Chart.js file. I hope this helps, good luck.

tasha

Hello JackJack,

Thank you! We appreciate your feedback.

Yes, the ability to implement a reference line marking the current date ('Today') will be included in the upcoming commercial version of the Gantt.

JackJack

All thanks for the response!

Hi tasha
I tried to implement the solution i found this forum to let the gantt scroll to a certain date. For my case i tried to scroll to today's date. But it seems like not working.

const target = useMemo(() => new Date(), []); const minDate = useMemo(() => { let min = new Date().valueOf(); filteredTasks.forEach((d) => { if (d.start && d.start.valueOf() < min) { min = d.start.valueOf(); } }); return new Date(min); }, [filteredTasks]);

useEffect(() => {
    if (apiRef.current) {
        const state = apiRef.current.getState();
        const cellWidth = state?.cellWidth ?? 0;

        const diff = differenceInCalendarDays(target, minDate) + 1;
        const left = cellWidth * diff;

        if (cellWidth > 0) {
            setTimeout(() => {
                apiRef.current?.exec("scroll-chart", { left });
            });
        }
    }
}, [apiRef.current, minDate, target]);

function init(api: IApi) {
    setApi(api);
    apiRef.current = api;

    apiRef.current.on("select-task", task => {
        setSelectedTask(task);
    });
};

tasha

Unfortunately it seems that there is a problem with the scroll-chart action, which appears to be a bug. We are aware of this issue and plan to fix it in one of the future releases. Thank you for your understanding.