Customizing Visible Date Range in KendoReact Gantt Chart for Yearly, Monthly, and Weekly Views

[Sulav]

Hi Kendo Team,

I'm currently working with the KendoReact Gantt Chart and would like to customize how many dates are visible in the chart for different views (Yearly, Monthly, Weekly). Specifically, I want to control the time span shown for each view — for example:

• In Yearly view, show 5 years instead of the default range

• In Monthly view, limit the chart to show only 6 months at a time

• In Weekly view, show just 4 weeks of data

Is there a recommended way to configure the visible date range or scale for each view mode?

Any guidance or code example would be greatly appreciated!

Thanks

[Alexander]

Hello, Sulav,

You can control the visible time span for each Gantt view (yearly, monthly, weekly, daily) by using the dateRange property provided by each individual GanttView component, such as <GanttWeekView />, <GanttDayView />,  <GanttMonthView /> and <GanttYearView />. This allows you to explicitly define the start and end dates that should be displayed for each specific view mode.

I have prepared a simple demo showcasing the desired outcome with three views available for the Gantt, with the applied ranges as you described. I have also added comments to clarify things even further:

• https://stackblitz.com/edit/react-nvjzgnh5?file=app%2Fapp.jsx 

Hope you find this answer helpful. If you have any further questions, we will be happy to assist you.

Regards,
Alexander
Progress Telerik