SfCalendar change color month

[dtorologic]

I'm trying to change the color of the month selector.

https://ibb.co/K6cdg3H

[PreethikaSelvam]

Hi @dtorologic,

Currently, we don't have the option to customize the datePicker background color which occurs when enabling the showDatePickerButton property in the SfCalendar. However, you can achieve this with the help of a custom header and show the date picker in showDialog. We shared the sample for your reference, you can use this and achieve your requirements.

Please let us know if you need any further assistance.

Regards,
Preethika Selvam.
gh1942 (2).zip

[dtorologic]

Hi @dtorologic,

Currently, we don't have the option to customize the datePicker background color which occurs when enabling the showDatePickerButton property in the SfCalendar. However, you can achieve this with the help of a custom header and show the date picker in showDialog. We shared the sample for your reference, you can use this and achieve your requirements.

Please let us know if you need any further assistance.

Regards,
Preethika Selvam.
gh1942 (2).zip

Hello ,
Thank you for your response, when creating a dialog to select the month, how do I do if I want it to show that same month on the calendar when I click that month?

[PreethikaSelvam]

Hi @dtorologic,

To customize the calendar month header with the same month selected in the dialog box, we suggest using the onViewChanged callback in the SfDateRangePicker. This callback dynamically updates _headerText to reflect the current visible date range whenever we navigate through months or years. Additionally, by using the onSelectionChanged callback in the SfDateRangePicker, we extract the selected month date and update the controller displayDate. We have provided a code snippet, user guide documentation, sample, and output screenshot below for your reference. You can modify the sample based on your needs.

UG Link:

https://help.syncfusion.com/flutter/daterangepicker/callbacks#view-changed-callback

https://help.syncfusion.com/flutter/daterangepicker/callbacks#selection-changed-callback

Code snippet:

`
child: SfDateRangePicker(

                            onViewChanged:

                                (DateRangePickerViewChangedArgs args) {

                              var visibleDates = args.visibleDateRange;

                              _headerText = DateFormat('MMMM yyyy').format(

                                  visibleDates.startDate as DateTime);

                              SchedulerBinding.instance

                                  .addPostFrameCallback((duration) {

                                setState(() {});

                              });

                            },

                            onSelectionChanged: (selectedValue) {

                              controller.displayDate = selectedValue.value;

                            },

                          ),

`
Please let us know if you need any further assistance.

Regards,

Preethika Selvam.
gh1942.zip