1. Home
  2. Forum
  3. Flutter
  4. Customizing the View Change Buttons in syncfusion_flutter_calendar

Customizing the View Change Buttons in syncfusion_flutter_calendar

Hello everyone,

I'm currently working on a Flutter application that uses the syncfusion_flutter_calendar widget, and I would like to customize the default view change buttons (day, week, workWeek, month, etc.).

I know that the allowedViews property allows activating these buttons, but I want to further customize their style and layout. I've considered using a custom AppBar with IconButton, but I prefer to use the default buttons provided by the package to retain some built-in functionalities.

Here is what I would like to achieve:

  1. Customize the appearance of the buttons (colors, icons, styles).
  2. Modify the background color and shape of the buttons.
  3. Rearrange the layout of the buttons if possible.
  4. Add additional functionalities to the buttons (e.g., adding extra actions on click).

Additionally, I would like the buttons to look as shown in the attached image:

  • When a button is selected, it should have a solid blue background with white text.
  • When a button is not selected, it should have a white background with a blue border and blue text.

Does anyone have any suggestions or examples on the best way to proceed? Is it possible to override the default buttons or customize them directly within the package?

Thank you in advance for your help!

Best regards,

David


Attachment: calendar_bdd6cf84.zip

3 Replies
YG Yuvaraj Gajaraj Syncfusion Team June 17, 2024 12:28 PM UTC

Hi David,


In SfCalendar, there is no direct support to customize the view change buttons, instead, you can achieve your requirement with the help of having a custom header and update the view with the help of a controller. We have shared the related UG and KB documentation below for your reference, you can follow the guidelines and achieve your requirements.


UG,

https://help.syncfusion.com/flutter/calendar/date-navigations#programmatic-date-navigation


KB,

https://support.syncfusion.com/kb/article/9606/


If you have any further queries, please get back to us. We are always happy to assist you.


Regards,

Yuvaraj.


DA David July 4, 2024 02:02 PM UTC

Hi Yuvaraj,

Thank you for your response.

I understand that SfCalendar does not have direct support for customizing the view change buttons. I will follow your suggestion to use a custom header and update the view with the help of a controller. I appreciate the links to the UG and KB documentation; they will be very helpful.

Thank you for your assistance.

Best regards, 

David


YG Yuvaraj Gajaraj Syncfusion Team July 5, 2024 06:34 AM UTC

Hi David,


Most welcome. If you have any further queries please get back to us, we are always happy to assist you.


Regards,

Yuvaraj.


Loader.
Up arrow icon