We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How to customise the datePicker of Calendar

Hi Syncfusion team, I currently use the month Calendar, with showDatePickerButton property is set to true. My question is how can I customise the date-picker that appears after I click on the datePickerButton (background color, border, etc...)

2 Replies 1 reply marked as answer

MS Muniappan Subramanian Syncfusion Team March 17, 2023 11:55 AM UTC

As per the current implementation, the Flutter Calendar does not have built-in support for customizing the date picker. The date picker is mainly used for navigating between different calendar views.

Please refer to our UG documentation for more information on the date picker: https://help.syncfusion.com/flutter/calendar/date-navigations#show-date-picker

To achieve your customization requirement, you can hide the default headers and add the 'SfDateRangePicker' as a custom header in the Flutter Calendar. We have provided a sample for your reference.

Note that for different calendar views, you will need to handle the 'SfDateRangePicker' accordingly.

For more information on header customization in the calendar, please refer to our KB document: https://www.syncfusion.com/kb/10997/how-to-add-custom-header-and-view-header-in-the-flutter-calendar

For more information about SfDateRangePicker, Please refer to our UG documentation,


Attachment: customheader_67a36ab6.zip

Marked as answer

QM Quang Minh Nguy?n March 19, 2023 08:31 AM UTC

Thank you for replying to me. I'll follow your suggestion

Live Chat Icon For mobile
Up arrow icon