Customizing DatePicker to Render Months Instead of Days

Updated on Feb 6, 2026

Environment

Product	Kendo UI for Vue DatePicker
Version	Current

Description

I want to customize the Kendo UI for Vue 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 Kendo UI for Vue DatePicker show months instead of days?
• How to implement a month picker using Kendo UI for Vue DatePicker?
• What is the correct approach to customize the Kendo UI for Vue DatePicker for month selection?

Solution

To customize the Kendo UI for Vue 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 @change event to update the selected month.
• Attach the custom calendar component to the calendar prop of the DatePicker.

See Also

• Kendo UI for Vue DatePicker Overview
• Kendo UI for Vue DatePicker API