How to align Calender(syncfusion_flutter_datepicker) date and picker in center?

75 Views Asked by At

I am using syncfusion_flutter_datepicker. I tried to implement attendance page for attendance, I have to use red and green picker so i choose this plugin but when i implement this, the date and picker isn't aligning together in center. How to fix this issuesenter image description here

I read the documentation of syncfusion_flutter_datepicker but didnt find any solutions My code:

SfDateRangePicker(
                  // selectionRadius: 22,
                  // selectionShape: DateRangePickerSelectionShape.circle,
                  view: DateRangePickerView.month,
                  monthViewSettings: DateRangePickerMonthViewSettings(

                    blackoutDates: [DateTime(2020, 03, 26)],
                    weekendDays: const [7, 6],
                    specialDates: [
                      DateTime(2020, 03, 20),
                      DateTime(2020, 03, 16),
                      DateTime(2020, 03, 17),
                    ],
                    showTrailingAndLeadingDates: true,
                  ),
                  monthCellStyle: DateRangePickerMonthCellStyle(
                    blackoutDatesDecoration: BoxDecoration(
                      color: Colors.red,
                      border:
                          Border.all(color: const Color(0xFFF44436), width: 1),
                      shape: BoxShape.circle,
                    ),
                    weekendDatesDecoration: BoxDecoration(
                      color: const Color(0xFFDFDFDF),
                      border:
                          Border.all(color: const Color(0xFFB6B6B6), width: 1),
                      shape: BoxShape.circle,
                    ),
                    specialDatesDecoration: BoxDecoration(
                      color: Colors.green,
                      border:
                          Border.all(color: const Color(0xFF2B732F), width: 1),
                      shape: BoxShape.circle,
                    ),
                    blackoutDateTextStyle: TextStyle(
                      color: Colors.white,
                      decoration: TextDecoration.lineThrough,
                    ),
                    specialDatesTextStyle: const TextStyle(color: Colors.white),
                  ),
                  headerStyle: const DateRangePickerHeaderStyle(
                    textAlign: TextAlign.center, // Align center
                  ),
                )
0

There are 0 best solutions below