| layout | post |
|---|---|
| title | Headers in Flutter Date Range Picker | Syncfusion |
| description | Step-by-step guide to customize the header and view header in Syncfusion Flutter Date Range Picker—headerStyle, headerHeight, viewHeaderStyle, and dayFormat. |
| platform | flutter |
| control | SfDateRangePicker |
| documentation | ug |
You can customize the header of the date range picker using the headerStyle and headerHeight properties in date range picker.
You can customize the height of the header of SfDateRangePicker by using the headerHeight property.
{% tabs %} {% highlight dart hl_lines="6" %}
@override Widget build(BuildContext context) { return Scaffold( body: SfDateRangePicker( view: DateRangePickerView.month, headerHeight: 100, ), ); }
{% endhighlight %} {% endtabs %}
You can customize the header style of the SfDateRangePicker by using the backgroundColor, textStyle, and textAlign properties of DateRangePickerHeaderStyle.
{% tabs %} {% highlight dart hl_lines="6 7 8 9 10 11 12 13 14" %}
@override Widget build(BuildContext context) { return Scaffold( body: SfDateRangePicker( view: DateRangePickerView.month, headerStyle: DateRangePickerHeaderStyle( backgroundColor: Color(0xFF7fcd91), textAlign: TextAlign.center, textStyle: TextStyle( fontStyle: FontStyle.normal, fontSize: 25, letterSpacing: 5, color: Color(0xFFffeaea), ), ), ), ); }
{% endhighlight %} {% endtabs %}
You can customize the view header of the SfDateRangePicker using the viewHeaderHeight and viewHeaderStyle properties of DateRangePickerMonthViewSettings.
You can customize the view header height of SfDateRangePicker using the viewHeaderHeight property of DateRangePickerMonthViewSettings.
{% tabs %} {% highlight dart hl_lines="6 7" %}
@override Widget build(BuildContext context) { return Scaffold( body: SfDateRangePicker( view: DateRangePickerView.month, monthViewSettings: DateRangePickerMonthViewSettings( viewHeaderHeight: 100, ), ), ); }
{% endhighlight %} {% endtabs %}
You can customize the view header style of SfDateRangePicker by using the backgroundColor, textStyle properties of DateRangePickerViewHeaderStyle.
{% tabs %} {% highlight dart hl_lines="7 8 9" %}
@override Widget build(BuildContext context) { return Scaffold( body: SfDateRangePicker( view: DateRangePickerView.month, monthViewSettings: DateRangePickerMonthViewSettings( viewHeaderStyle: DateRangePickerViewHeaderStyle( backgroundColor: Color(0xFF7fcd91), textStyle: TextStyle(fontSize: 20, letterSpacing: 5), ), ), ), ); }
{% endhighlight %} {% endtabs %}
You can customize the view header of SfDateRangePicker by using the dayFormat property of DateRangePickerMonthViewSettings.
{% tabs %} {% highlight dart hl_lines="6" %}
@override Widget build(BuildContext context) { return Scaffold( body: SfDateRangePicker( view: DateRangePickerView.month, monthViewSettings: DateRangePickerMonthViewSettings(dayFormat: 'EEE'), ), ); }
{% endhighlight %} {% endtabs %}
- How to replace the view header with the custom widget in Flutter date range picker (SfDateRangePicker)
- How to restrict the year view navigation while tapping header of the Flutter date range picker (SfDateRangePicker)
- How to customize the header in Flutter multi date range picker (SfDateRangePicker)?
- How to style a header in the Flutter date range picker (SfDateRangePicker)
- How to select all days when clicking on the day header in the Flutter date range picker (SfDateRangePicker)