Displaying Days of Other Months in KendoReact DatePicker

Environment

Product Version	12.0.0
Product	Progress® KendoReact DatePicker

Description

How can I display the days of previous and next months in the KendoReact DatePicker calendar popup, similar to the standalone Calendar component?

This knowledge base article also answers the following questions:

• How can I show days from other months in KendoReact DatePicker?
• Can I customize the DatePicker to show dates from previous and next months?
• How to use a custom Calendar component within KendoReact DatePicker?
• How to enable the showOtherMonthDays feature in DatePicker?

Solution

To show the days of previous and next months in the DatePicker calendar popup, provide a custom Calendar component to the calendar prop of the DatePicker. Use the Calendar component with the showOtherMonthDays property set to true.

tsx

import { DatePicker, Calendar, CalendarProps } from '@progress/kendo-react-dateinputs';

const CustomCalendar = (props: CalendarProps) => <Calendar {...props} showOtherMonthDays={true} />;

const App = () => <DatePicker calendar={CustomCalendar} />;

This approach ensures the DatePicker calendar popup displays the days of other months, providing users with better context and easier navigation between months.

The following example demonstrates a complete implementation:

Change Theme

Theme

Loading ...

See Also

• KendoReact DatePicker Documentation
• KendoReact Calendar Documentation
• DatePicker Custom Calendar