Customizing DatePicker to Render Months Instead of Days

Updated on Jan 30, 2026

Environment

Product	KendoReact DatePicker
Version	Current

Description

I want to customize the KendoReact DatePicker component to render only the months of each year. The goal is to allow users to select a month instead of a specific day in the calendar view.

This knowledge base article also answers the following questions:

• How can I make the KendoReact DatePicker show months instead of days?
• How to implement a month picker using KendoReact DatePicker?
• What is the correct approach to customize the KendoReact DatePicker for month selection?

Solution

To customize the KendoReact DatePicker component for rendering months instead of days, follow these steps:

1. Create a custom Calendar component to render months only.
2. Use the custom Calendar component within the DatePicker.

Change Theme

Theme

Loading ...

Key Points

• The CustomCalendar component replaces the standard calendar view with buttons representing months.
• Use the onChange method to update the selected month.
• Attach the CustomCalendar component to the calendar prop of the DatePicker.

See Also

• KendoReact DatePicker Documentation
• KendoReact API Reference
• StackBlitz Example of Month Picker Customization