Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions Flutter/DateRangePicker/Callbacks.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ control: SfDateRangePicker
documentation: ug
---

# Callbacks in Flutter DateRangePicker (SfDateRangePicker)
# Callbacks in Flutter Date Range Picker (SfDateRangePicker)

Calendar supports the [ViewChangedCallback](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerViewChangedCallback.html) and [SelectionChangedCallback](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionChangedCallback.html) to interact with the Flutter date range picker.
Calendar supports the [ViewChangedCallback](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerViewChangedCallback.html) and [SelectionChangedCallback](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionChangedCallback.html) to interact with the Flutter Date Range Picker.

## View changed callback

Expand Down Expand Up @@ -40,7 +40,7 @@ The [onViewChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/

## Selection changed callback

The [onSelectionChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onSelectionChanged.html) callback triggers when selecting the dates from the date picker.
The [onSelectionChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onSelectionChanged.html) callback triggers when selecting the dates from the Flutter Date Range Picker.

* `args.value` - returns the dates based on the selection mode.

Expand Down
2 changes: 1 addition & 1 deletion Flutter/DateRangePicker/accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ The following APIs allows you to customize the colors of the following elements.

## Large fonts

The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) font size can be adjusted automatically based on device settings and the font size scaled based on the [MediaQueryData.textScaleFactor](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaleFactor.html). It also allows you to change the font size of all elements in date range picker.
The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) font size can be adjusted automatically based on device settings and the font size scaled based on the [MediaQueryData.textScaleFactor](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaleFactor.html). It also allows you to change the font size of all elements in Flutter Date Range Picker.
* [todayTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations)
* [leadingDatesTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations)
* [trailingDatesTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations)
Expand Down
4 changes: 2 additions & 2 deletions Flutter/DateRangePicker/builders.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@ documentation: ug
---
# Builders in Flutter DateRangePicker (SfDateRangePicker)

The date range picker allows you to create a responsive UI with the conditions based on a widget’s details, and to design and create your custom view to the month cells and year cells in the date range picker.
The Flutter Date Range Picker allows you to create a responsive UI with the conditions based on a widget’s details, and to design and create your custom view to the month cells and year cells.

## Cell builder

The [DateRangePickerCellBuilder](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerCellBuilder.html) allows you to design your custom view and assign the view to the month and year view cells of the date range picker by returning an appropriate widget in the [cellBuilder](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/cellBuilder.html) of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html).
The [DateRangePickerCellBuilder](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerCellBuilder.html) allows you to design your custom view and assign the view to the month and year view cells of the Flutter Date Range Picker by returning an appropriate widget in the [cellBuilder](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/cellBuilder.html) of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html).

[DateRangePickerCellDetails](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerCellDetails-class.html): Returns the details of the cell.

Expand Down
2 changes: 1 addition & 1 deletion Flutter/DateRangePicker/customizations.md
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ You can customize the month format of the [SfDateRangePicker](https://pub.dev/do

## Selection cell customization

You can also customize the date range picker section by using the [monthCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/monthCellStyle.html) of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html).
You can also customize the Flutter Date Range Picker section by using the [monthCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/monthCellStyle.html) of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html).

* **Selection date text style** – Selected date text style can be customized using the [selectionTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionTextStyle.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) that is applicable for [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionMode.html) is [single](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#single) and [multiple](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiple), it is also applicable to start and end of the selected range text style in the [single](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#single) and [multiRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiRange) selection.

Expand Down
4 changes: 2 additions & 2 deletions Flutter/DateRangePicker/date-navigations.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ control: SfDateRangePicker
documentation: ug
---

# Date Navigation in Flutter DateRangePicker (SfDateRangePicker)
# Date Navigation in Flutter Date Range Picker (SfDateRangePicker)

## Programmatic date navigation

Expand Down Expand Up @@ -392,7 +392,7 @@ You can customize the navigation mode of the date range picker by using the [nav
>**NOTE**
When the navigation mode is set to [DateRangePickerNavigationMode.scroll](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerNavigationMode.html#scroll).
* Swipe selection is not supported when the range and multi-range are the selection modes.
* The [onViewChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onViewChanged.html) will be called when the view reaches the starting position of the date range picker view.
* The [onViewChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onViewChanged.html) will be called when the view reaches the starting position of the Date Range Picker view.
* [forward](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/forward.html), [backward](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/backward.html) and [showNavigationArrow](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/showNavigationArrow.html) is not supported.


Expand Down
4 changes: 2 additions & 2 deletions Flutter/DateRangePicker/date-restrictions.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ control: SfDateRangePicker
documentation: ug
---

# Date Restrictions in Flutter DateRangePicker (SfDateRangePicker)
# Date Restrictions in Flutter Date Range Picker (SfDateRangePicker)

## Minimum display date

Expand Down Expand Up @@ -97,7 +97,7 @@ In [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepick

## SelectableDayPredicate

[selectableDayPredicate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectableDayPredicate.html) callback allows certain days for selection. Only the days that [selectableDayPredicate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectableDayPredicate.html) returns `true` will be selectable in the date range picker.
[selectableDayPredicate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectableDayPredicate.html) callback allows certain days for selection. Only the days that [selectableDayPredicate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectableDayPredicate.html) returns `true` will be selectable in the Flutter Date Range Picker.

{% tabs %}
{% highlight dart hl_lines="4 5 6 7 8 9" %}
Expand Down
26 changes: 13 additions & 13 deletions Flutter/DateRangePicker/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ control: SfDateRangePicker
documentation: ug
---

# Getting Started with Flutter DateRangePicker (SfDateRangePicker)
# Getting Started with Flutter Date Range Picker (SfDateRangePicker)

This section explains the steps required to add the [date range picker](https://www.syncfusion.com/flutter-widgets/flutter-daterangepicker) widget. This section covers only basic features needed to get started with Syncfusion<sup>&reg;</sup> date range picker widget.
This section explains the steps required to add the [Flutter Date Range Picker](https://www.syncfusion.com/flutter-widgets/flutter-daterangepicker) widget. This section covers only basic features needed to get started with Syncfusion® Flutter DateRangePicker widget.

To get start quickly with our Flutter date range picker widget, you can check on this video.
To get start quickly with our Flutter Date Range Picker widget, you can check on this video.

<style>#flutterDateRangePickerVideoTutorial{width : 90% !important; height: 300px !important }</style>
<iframe id='flutterDateRangePickerVideoTutorial' src='https://www.youtube.com/embed/3TyuUVExuPs'></iframe>
Expand All @@ -22,7 +22,7 @@ Create a simple project using the instructions given in the [Getting Started wit

**Add dependency**

Add the Syncfusion<sup>&reg;</sup> Flutter date range picker dependency to your `pubspec.yaml` file.
Add the Syncfusion® Flutter Date Range Picker dependency to your `pubspec.yaml` file.

{% highlight dart %}

Expand All @@ -32,7 +32,7 @@ syncfusion_flutter_datepicker: ^xx.x.xx

{% endhighlight %}

N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Date Picker`](https://pub.dev/packages/syncfusion_flutter_datepicker/versions) package.
N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Date Range Picker`](https://pub.dev/packages/syncfusion_flutter_datepicker/versions) package.

**Get packages**

Expand All @@ -56,9 +56,9 @@ import 'package:syncfusion_flutter_datepicker/datepicker.dart';
{% endhighlight %}
{% endtabs %}

## Initialize date range picker
## Initialize Date Range Picker

After importing the package, initialize the date range picker widget as a child of any widget. Here, the date range picker widget is added as a child of the scaffold widget.
After importing the package, initialize the Flutter Date Range Picker widget as a child of any widget. Here, the date range picker widget is added as a child of the scaffold widget.

{% tabs %}
{% highlight dart hl_lines="5" %}
Expand All @@ -79,7 +79,7 @@ After importing the package, initialize the date range picker widget as a child

## Multiple picker views

The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) widget provides four different types of views to display. It can be assigned to the widget constructor by using the [view](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/view.html) property. Default view of the widget is month view. By default the current date will be displayed initially for all the date range picker views.
The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) widget provides four different types of views to display. It can be assigned to the widget constructor by using the [view](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/view.html) property. Default view of the widget is month view. By default the current date will be displayed initially for all the Date Range Picker views.

{% tabs %}
{% highlight dart hl_lines="5" %}
Expand Down Expand Up @@ -124,7 +124,7 @@ The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepic

The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) supports selecting single, multiple, and range of dates. It also supports programmatic selection.

The selected date or range details can be obtained using the [onSelectionChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onSelectionChanged.html) callback of date range picker. The callback will return the [DateRangePickerSelectionChangedArgs](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionChangedArgs-class.html) which contains the selected date or range details.
The selected date or range details can be obtained using the [onSelectionChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onSelectionChanged.html) callback of the Flutter Date Range Picker. The callback will return the [DateRangePickerSelectionChangedArgs](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionChangedArgs-class.html) which contains the selected date or range details.

{% tabs %}
{% highlight dart hl_lines="1 2 3 11" %}
Expand Down Expand Up @@ -154,7 +154,7 @@ The selected date or range details can be obtained using the [onSelectionChanged

## Today highlight color

You can highlight the today’s date by customizing its color in the date range picker by using the [todayHighlightColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/todayHighlightColor.html) property. This allows you to make today’s date stand out in all views such as month, year, decade, and century.
You can highlight the today’s date by customizing its color in the Flutter Date Range Picker by using the [todayHighlightColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/todayHighlightColor.html) property. This allows you to make today’s date stand out in all views such as month, year, decade, and century.


{% tabs %}
Expand All @@ -175,15 +175,15 @@ You can highlight the today’s date by customizing its color in the date range

## Action buttons

You can display action buttons at the bottom of the date range picker by using the [showActionButtons](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/showActionButtons.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html).
You can display action buttons at the bottom of the Flutter Date Range Picker by using the [showActionButtons](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/showActionButtons.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html).

* [confirmText](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/confirmText.html) - Customizes the text that display on the confirm button.

* [cancelText](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/cancelText.html) - Customizes the text that display on the cancel button.

* [onCancel](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onCancel.html) - Callback function that is triggered when the cancel button is tapped within a date range picker.

* [onSubmit](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onSubmit.html) - Callback function that is triggered when the confirm button is tapped within a date range picker.
* [onSubmit](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onSubmit.html) - Callback function that is triggered when the confirm button is tapped within a Flutter Date Range Picker.

{% tabs %}
{% highlight dart hl_lines="11" %}
Expand Down Expand Up @@ -220,7 +220,7 @@ You can display action buttons at the bottom of the date range picker by using t

## Today button

The today button can be displayed at the bottom of the date range picker by using the [showTodayButton](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/showTodayButton.html) property of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). It easily moves to the current date of the picker view.
The today button can be displayed at the bottom of the Flutter Date Range Picker by using the [showTodayButton](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/showTodayButton.html) property of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). It easily moves to the current date of the picker view.

{% tabs %}
{% highlight dart hl_lines="6" %}
Expand Down
4 changes: 2 additions & 2 deletions Flutter/DateRangePicker/headers.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ control: SfDateRangePicker
documentation: ug
---

# Headers in Flutter DateRangePicker (SfDateRangePicker)
# Headers in Flutter Date Range Picker (SfDateRangePicker)

You can customize the header of the date range picker using the [headerStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/headerStyle.html) and [headerHeight](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/headerHeight.html) properties in date range picker.
You can customize the header of the Flutter Date Range Picker using the [headerStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/headerStyle.html) and [headerHeight](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/headerHeight.html) properties in date range picker.

## Customize the header height

Expand Down
Loading