Changing Date-Time Format in Column Headers of Day, Week, and Timeline View in KendoReact Scheduler

Updated on Mar 31, 2026

Environment

Product	KendoReact Scheduler
Version	Current

Description

I want to change the date-time format in the column headers of the Day, Week, and Timeline views in the KendoReact Scheduler. This involves customizing the default date-time display to meet specific format requirements.

This knowledge base article also answers the following questions:

• How to modify the date format in KendoReact Scheduler column headers?
• How to customize time format in Scheduler views?
• How to use dateHeaderCell and timeHeaderCell props for formatting?

Solution

To change the date-time format of the column headers, use the dateHeaderCell and timeHeaderCell props provided by the Scheduler. These props allow you to define custom rendering for the respective column headers.

1. Use the dateHeaderCell prop to customize the date format for column headers.
2. Use the timeHeaderCell prop to customize the time format for column headers.

Here is an example:

Change Theme

Theme

Loading ...

Explanation:

• CustomDateHeaderCell: Formats the date using Intl.DateTimeFormat for a short weekday, month, and day.
• CustomTimeHeaderCell: Formats the time using Intl.DateTimeFormat for hour and minute.
• The dateHeaderCell prop is used in DayView and WeekView.
• The timeHeaderCell prop is used in TimelineView.

See Also

• KendoReact Scheduler Documentation
• DateHeaderCell API
• TimeHeaderCell API