From 8cc6593c8479545e2fff9f6f1cc803d017158221 Mon Sep 17 00:00:00 2001 From: Hariram4428 Date: Thu, 3 Jul 2025 12:56:22 +0530 Subject: [PATCH 1/2] FLUT-965289-[feature]: Updated UG improvements for barcode --- Flutter/barcode/accessibility.md | 4 +- Flutter/barcode/barcode-customization.md | 287 ++++++++++++----------- Flutter/barcode/getting-started.md | 93 ++++---- Flutter/barcode/one-dimensional.md | 194 ++++++++------- Flutter/barcode/two-dimensional.md | 141 +++++------ 5 files changed, 377 insertions(+), 342 deletions(-) diff --git a/Flutter/barcode/accessibility.md b/Flutter/barcode/accessibility.md index 7229c6ce6..b33418759 100644 --- a/Flutter/barcode/accessibility.md +++ b/Flutter/barcode/accessibility.md @@ -11,7 +11,7 @@ documentation: ug ## Sufficient contrast -The `SfBarcodeGenerator` [theming](https://help.syncfusion.com/flutter/themes) support offers a consistent and standardized look, as well as the ability to customize colors for all UI elements. +The [`SfBarcodeGenerator`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator-class.html) [theming](https://help.syncfusion.com/flutter/themes) support offers a consistent and standardized look, as well as the ability to customize colors for all UI elements. You can customize colors for the following elements: * [Bar color](https://help.syncfusion.com/flutter/barcode/barcode-customization) @@ -19,5 +19,5 @@ You can customize colors for the following elements: ## Large fonts -The `SfBarcodeGenerator` automatically adjusts font size based on device settings and scales according to the `MediaQueryData.textScaleFactor`. It also allows you to change the font size of all text elements in the barcode generator. +The [`SfBarcodeGenerator`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator-class.html) automatically adjusts font size based on device settings and scales according to the [`MediaQueryData.textScaleFactor`](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaleFactor.html). It also allows you to change the font size of all text elements in the barcode generator. * [Input value of barcode](https://help.syncfusion.com/flutter/barcode/barcode-customization#text-customization) \ No newline at end of file diff --git a/Flutter/barcode/barcode-customization.md b/Flutter/barcode/barcode-customization.md index b3b5e6146..5b91fc74b 100644 --- a/Flutter/barcode/barcode-customization.md +++ b/Flutter/barcode/barcode-customization.md @@ -18,21 +18,19 @@ To display the input value of the barcode, enable its [`showValue`](https://pub. {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - width: 300, - child: SfBarcodeGenerator( - value: '12634388927', - showValue: true) - ) - ) - ); - } + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + width: 300, + child: SfBarcodeGenerator(value: '12634388927', showValue: true), + ), + ), + ); + } {% endhighlight %} @@ -44,24 +42,27 @@ The text style can be customized using the [`textStyle`](https://pub.dev/documen {% highlight dart %} - @override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - width: 300, - child: SfBarcodeGenerator( - value: '12634388927', - - textStyle: TextStyle(fontFamily: 'Times', - fontSize: 16, fontStyle: FontStyle.italic, - fontWeight: FontWeight.bold, - color: Colors.red), - showValue: true) - ) - ) + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + width: 300, + child: SfBarcodeGenerator( + value: '12634388927', + textStyle: TextStyle( + fontFamily: 'Times', + fontSize: 16, + fontStyle: FontStyle.italic, + fontWeight: FontWeight.bold, + color: Colors.red, + ), + showValue: true, + ), + ), + ), ); } @@ -75,20 +76,21 @@ Control the space between the text and the barcode with the [`textSpacing`](http {% highlight dart %} - @override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - width: 300, - child: SfBarcodeGenerator( - value: '12634388927', - textSpacing: 25, - showValue: true) - ) - ) + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + width: 300, + child: SfBarcodeGenerator( + value: '12634388927', + textSpacing: 25, + showValue: true, + ), + ), + ), ); } @@ -98,26 +100,27 @@ Control the space between the text and the barcode with the [`textSpacing`](http **Horizontal text alignment** -The horizontal text alignment can be managed with the [`textAlign`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textAlign.html) property of barcode generator. Position the displayed text at the `start`, `center` or `end` of the control. The default value of [`textAlign`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textAlign.html) property is center. +The horizontal text alignment can be managed with the [`textAlign`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textAlign.html) property of barcode generator. Position the displayed text at the [`start`](https://api.flutter.dev/flutter/dart-ui/TextAlign.html#start), [`center`](https://api.flutter.dev/flutter/dart-ui/TextAlign.html#center) or [`end`](https://api.flutter.dev/flutter/dart-ui/TextAlign.html#end) of the control. The default value of [`textAlign`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textAlign.html) property is center. {% highlight dart %} - @override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - width: 240, - child: SfBarcodeGenerator( - value: '12634', - textAlign: TextAlign.end, - showValue: true) - ) - ) - ); - } + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + width: 240, + child: SfBarcodeGenerator( + value: '12634', + textAlign: TextAlign.end, + showValue: true, + ), + ), + ), + ); + } {% endhighlight %} @@ -135,23 +138,24 @@ The following code snippet shows the one dimensional barcode with [`module`](htt {% highlight dart %} - @override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, body: Center( - child: Container( - height: 150, - width: 230, - child: SfBarcodeGenerator( - backgroundColor: Color.fromRGBO(193, 250, 250, 1), - value: '123456789', - showValue: true, - symbology: Codabar(module: 1)), - ) + child: Container( + height: 150, + width: 230, + child: SfBarcodeGenerator( + backgroundColor: Color.fromRGBO(193, 250, 250, 1), + value: '123456789', + showValue: true, + symbology: Codabar(module: 1), + ), ), - ); - } + ), + ); + } {% endhighlight %} @@ -163,20 +167,21 @@ Below code snippet shows the one dimensional barcode without the [`module`](http {% highlight dart %} - @override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, body: Center( - child: Container( - height: 150, - width: 230, - child: SfBarcodeGenerator( - backgroundColor: Color.fromRGBO(193, 250, 250, 1), - value: '123456789', - showValue: true, - symbology: Codabar()), - ) + child: Container( + height: 150, + width: 230, + child: SfBarcodeGenerator( + backgroundColor: Color.fromRGBO(193, 250, 250, 1), + value: '123456789', + showValue: true, + symbology: Codabar(), + ), + ), ), ); } @@ -191,22 +196,23 @@ The following code snippet shows the two dimensional barcode with [`module`](htt {% highlight dart %} - @override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, body: Center( - child: Container( - height: 150, - width: 230, - child: SfBarcodeGenerator( - backgroundColor: Color.fromRGBO(193, 250, 250, 1), - value: '123456789', - symbology: QRCode(module: 2),), - ) + child: Container( + height: 150, + width: 230, + child: SfBarcodeGenerator( + backgroundColor: Color.fromRGBO(193, 250, 250, 1), + value: '123456789', + symbology: QRCode(module: 2), + ), ), - ); - } + ), + ); + } {% endhighlight %} @@ -216,22 +222,23 @@ The following code snippet shows the two dimensional barcode with [`module`](htt {% highlight dart %} - @override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, body: Center( - child: Container( - height: 150, - width: 230, - child: SfBarcodeGenerator( - backgroundColor: Color.fromRGBO(193, 250, 250, 1), - value: '123456789', - symbology: QRCode(),), - ) + child: Container( + height: 150, + width: 230, + child: SfBarcodeGenerator( + backgroundColor: Color.fromRGBO(193, 250, 250, 1), + value: '123456789', + symbology: QRCode(), + ), ), - ); - } + ), + ); + } {% endhighlight %} @@ -243,22 +250,22 @@ Customize the barcode's bar color using the [`barColor`](https://pub.dev/documen {% highlight dart %} - @override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - width: 240, - child: SfBarcodeGenerator( - value: '12634', - barColor: Colors.deepPurple, - ) - ) - ) - ); - } + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + width: 240, + child: SfBarcodeGenerator( + value: '12634', + barColor: Colors.deepPurple, + ), + ), + ), + ); + } {% endhighlight %} @@ -270,24 +277,24 @@ You can customize the barcode's background color with the [`backgroundColor`](ht {% highlight dart %} - @override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, body: Center( - child: Container( - height: 150, - width: 230, - child: SfBarcodeGenerator( - backgroundColor: Color.fromRGBO(193, 250, 250, 1), - value: '123456789', - symbology: Codabar(),), - ) - ), - ); - } - - {% endhighlight %} + child: Container( + height: 150, + width: 230, + child: SfBarcodeGenerator( + backgroundColor: Color.fromRGBO(193, 250, 250, 1), + value: '123456789', + symbology: Codabar(), + ), + ), + ), + ); + } - ![background color](images/text-customization/background-color.jpg) +{% endhighlight %} +![background color](images/text-customization/background-color.jpg) diff --git a/Flutter/barcode/getting-started.md b/Flutter/barcode/getting-started.md index 20dab34e7..b82ce2657 100644 --- a/Flutter/barcode/getting-started.md +++ b/Flutter/barcode/getting-started.md @@ -56,19 +56,19 @@ Add the Barcode Generator widget as a child of any widget. Here, the widget is a {% highlight dart %} - @override - Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: Container( - height: 150, - child:SfBarcodeGenerator(value:'http://www.syncfusion.com') - ) - ) - ) - ); - } + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: Container( + height: 150, + child: SfBarcodeGenerator(value: 'http://www.syncfusion.com'), + ), + ), + ), + ); + } {% endhighlight %} @@ -82,21 +82,23 @@ You can set the required symbology type to the barcode generator based on input {% highlight dart %} - @override - Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: Container( - height: 350, - width: 350, - child:SfBarcodeGenerator(value:'http://www.syncfusion.com', - symbology: QRCode()) - ) - ) - ) - ); - } + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: Container( + height: 350, + width: 350, + child: SfBarcodeGenerator( + value: 'http://www.syncfusion.com', + symbology: QRCode(), + ), + ), + ), + ), + ); + } {% endhighlight %} @@ -108,22 +110,25 @@ The provided input value can be displayed below the barcode by enabling the [`sh {% highlight dart %} - @override - Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: Container( - height: 350, - width: 350, - child:SfBarcodeGenerator(value:'http://www.syncfusion.com', - showValue: true, textSpacing: 15, - symbology: QRCode()) - ) - ) - ) - ); - } + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: Container( + height: 350, + width: 350, + child: SfBarcodeGenerator( + value: 'http://www.syncfusion.com', + showValue: true, + textSpacing: 15, + symbology: QRCode(), + ), + ), + ), + ), + ); + } {% endhighlight %} diff --git a/Flutter/barcode/one-dimensional.md b/Flutter/barcode/one-dimensional.md index d7f0b51ed..9831694af 100644 --- a/Flutter/barcode/one-dimensional.md +++ b/Flutter/barcode/one-dimensional.md @@ -34,18 +34,19 @@ One-dimensional barcodes represent data by varying the widths and spacings of pa {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - child: SfBarcodeGenerator( - value: '123456789', - showValue: true, - symbology: Codabar(module: 2),), - ) + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + child: SfBarcodeGenerator( + value: '123456789', + showValue: true, + symbology: Codabar(module: 2), + ), + ), ), ); } @@ -63,21 +64,22 @@ One-dimensional barcodes represent data by varying the widths and spacings of pa {% highlight dart %} - @override - Widget build(BuildContext context){ - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - child: SfBarcodeGenerator( - value: 'CODE39', - showValue: true, - symbology: Code39(module: 2),), - ) + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + child: SfBarcodeGenerator( + value: 'CODE39', + showValue: true, + symbology: Code39(module: 2), + ), ), - ); - } + ), + ); + } {% endhighlight %} @@ -91,22 +93,22 @@ The [`enableCheckSum`](https://pub.dev/documentation/syncfusion_flutter_barcodes {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - child: SfBarcodeGenerator( - value: '051091', - showValue: true, - symbology: Code39Extended(module: 2), - ) - ), - ) - ); - } + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + child: SfBarcodeGenerator( + value: '051091', + showValue: true, + symbology: Code39Extended(module: 2), + ), + ), + ), + ); + } {% endhighlight %} @@ -123,17 +125,19 @@ As like [`Code39`](https://pub.dev/documentation/syncfusion_flutter_barcodes/lat {% highlight dart %} - @override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, body: Center( child: Container( height: 150, - child: SfBarcodeGenerator(value: '01234567', + child: SfBarcodeGenerator( + value: '01234567', showValue: true, - symbology: Code93(module: 2),), - ) + symbology: Code93(module: 2), + ), + ), ), ); } @@ -150,17 +154,19 @@ The [`Code128`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest {% highlight dart %} - @override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, body: Center( child: Container( height: 150, - child: SfBarcodeGenerator(value: 'CODE128', + child: SfBarcodeGenerator( + value: 'CODE128', showValue: true, - symbology: Code128(module: 2),), - ) + symbology: Code128(module: 2), + ), + ), ), ); } @@ -175,17 +181,19 @@ The [`Code128`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest {% highlight dart %} - @override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, body: Center( child: Container( height: 150, - child: SfBarcodeGenerator(value: 'CODE128A', + child: SfBarcodeGenerator( + value: 'CODE128A', showValue: true, - symbology: Code128A(module: 2),), - ) + symbology: Code128A(module: 2), + ), + ), ), ); } @@ -200,17 +208,19 @@ The [`Code128`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest {% highlight dart %} - @override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, body: Center( child: Container( height: 150, - child: SfBarcodeGenerator(value: 'CODE128B', + child: SfBarcodeGenerator( + value: 'CODE128B', showValue: true, - symbology: Code128B(module: 2),), - ) + symbology: Code128B(module: 2), + ), + ), ), ); } @@ -225,17 +235,19 @@ The [`Code128`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest {% highlight dart %} - @override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, body: Center( child: Container( height: 150, - child: SfBarcodeGenerator(value: '1234567890', + child: SfBarcodeGenerator( + value: '1234567890', showValue: true, - symbology: Code128C(module: 2),), - ) + symbology: Code128C(module: 2), + ), + ), ), ); } @@ -256,17 +268,19 @@ The last seven characters of Code Sets A and B (character values 96 - 102) and t {% highlight dart %} - @override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, body: Center( child: Container( height: 150, - child: SfBarcodeGenerator(value: '72527273070', + child: SfBarcodeGenerator( + value: '72527273070', showValue: true, - symbology: UPCA(module: 2),), - ) + symbology: UPCA(module: 2), + ), + ), ), ); } @@ -283,17 +297,19 @@ As like [`UPC-A`](https://pub.dev/documentation/syncfusion_flutter_barcodes/late {% highlight dart %} - @override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, body: Center( child: Container( height: 150, - child: SfBarcodeGenerator(value: '310194', + child: SfBarcodeGenerator( + value: '310194', showValue: true, - symbology: UPCE(module: 2),), - ) + symbology: UPCE(module: 2), + ), + ), ), ); } @@ -310,17 +326,19 @@ As like [`UPC-A`](https://pub.dev/documentation/syncfusion_flutter_barcodes/late {% highlight dart %} - @override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, body: Center( child: Container( height: 150, - child: SfBarcodeGenerator(value: '9735940564824', + child: SfBarcodeGenerator( + value: '9735940564824', showValue: true, - symbology: EAN13(module: 2),), - ) + symbology: EAN13(module: 2), + ), + ), ), ); } @@ -337,17 +355,19 @@ As like [`EAN13`](https://pub.dev/documentation/syncfusion_flutter_barcodes/late {% highlight dart %} - @override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, body: Center( child: Container( height: 150, - child: SfBarcodeGenerator(value: '11223344', + child: SfBarcodeGenerator( + value: '11223344', showValue: true, - symbology: EAN8(module: 2),), - ) + symbology: EAN8(module: 2), + ), + ), ), ); } diff --git a/Flutter/barcode/two-dimensional.md b/Flutter/barcode/two-dimensional.md index b8a86830e..3e072d8cb 100644 --- a/Flutter/barcode/two-dimensional.md +++ b/Flutter/barcode/two-dimensional.md @@ -24,20 +24,21 @@ A [`QR Code`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/b {% highlight dart %} - @override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 300, - width: 300, - child: SfBarcodeGenerator( - value: 'www.syncfusion.com', - showValue: true, - symbology: QRCode()) - ) - ) + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 300, + width: 300, + child: SfBarcodeGenerator( + value: 'www.syncfusion.com', + showValue: true, + symbology: QRCode(), + ), + ), + ), ); } @@ -66,20 +67,21 @@ High - it recovers the data up to 30% {% highlight dart %} - @override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 300, - width: 300, - child: SfBarcodeGenerator( - value: 'www.syncfusion.com', - showValue: true, - symbology: QRCode(errorCorrectionLevel: ErrorCorrectionLevel.high),) - ) - ) + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 300, + width: 300, + child: SfBarcodeGenerator( + value: 'www.syncfusion.com', + showValue: true, + symbology: QRCode(errorCorrectionLevel: ErrorCorrectionLevel.high), + ), + ), + ), ); } @@ -101,20 +103,21 @@ binary - supports Shift JIS characters {% highlight dart %} - @override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 300, - width: 300, - child: SfBarcodeGenerator( - value: '1263438892737643894930872', - showValue: true, - symbology: QRCode(inputMode: QRInputMode.numeric),) - ) - ) + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 300, + width: 300, + child: SfBarcodeGenerator( + value: '1263438892737643894930872', + showValue: true, + symbology: QRCode(inputMode: QRInputMode.numeric), + ), + ), + ), ); } @@ -132,20 +135,21 @@ The number of modules increases in steps of 4 modules per side up to Version 40 {% highlight dart %} - @override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 300, - width: 300, - child: SfBarcodeGenerator( - value: 'www.syncfusion.com', - showValue: true, - symbology: QRCode(codeVersion: QRCodeVersion.version09)) - ) - ) + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 300, + width: 300, + child: SfBarcodeGenerator( + value: 'www.syncfusion.com', + showValue: true, + symbology: QRCode(codeVersion: QRCodeVersion.version09), + ), + ), + ), ); } @@ -159,22 +163,23 @@ The number of modules increases in steps of 4 modules per side up to Version 40 {% highlight dart %} - @override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 300, - width: 300, - child: SfBarcodeGenerator( - value: 'www.syncfusion.com', - showValue: true, - symbology: DataMatrix()) - ) - ) - ); - } + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 300, + width: 300, + child: SfBarcodeGenerator( + value: 'www.syncfusion.com', + showValue: true, + symbology: DataMatrix(), + ), + ), + ), + ); + } {% endhighlight %} @@ -218,5 +223,3 @@ When the encoding type is `ASCIINumeric`, then the code word will be calculated Code word = numerical value pair + 130. The numerical value pair will be like 00, 01, 02,.....99 - - From 5ebcbc60b15f427cb9ee08b59c5d42198df72d5c Mon Sep 17 00:00:00 2001 From: Hariram4428 Date: Thu, 3 Jul 2025 18:59:19 +0530 Subject: [PATCH 2/2] FLUT-965289-[feature]: Updated date picker content --- Flutter/DateRangePicker/Callbacks.md | 71 ++-- Flutter/DateRangePicker/accessibility.md | 8 +- Flutter/DateRangePicker/builders.md | 106 +++--- Flutter/DateRangePicker/customizations.md | 198 +++++----- Flutter/DateRangePicker/date-navigations.md | 155 ++++---- Flutter/DateRangePicker/date-restrictions.md | 112 +++--- Flutter/DateRangePicker/getting-started.md | 143 ++++---- Flutter/DateRangePicker/headers.md | 120 ++++--- Flutter/DateRangePicker/hijri-date-picker.md | 360 ++++++++++--------- Flutter/DateRangePicker/localization.md | 40 +-- Flutter/DateRangePicker/right-to-left.md | 71 ++-- Flutter/DateRangePicker/selections.md | 208 ++++++----- Flutter/DateRangePicker/views.md | 172 +++++---- 13 files changed, 946 insertions(+), 818 deletions(-) diff --git a/Flutter/DateRangePicker/Callbacks.md b/Flutter/DateRangePicker/Callbacks.md index 6d5489252..9b81946d3 100644 --- a/Flutter/DateRangePicker/Callbacks.md +++ b/Flutter/DateRangePicker/Callbacks.md @@ -8,27 +8,29 @@ documentation: ug --- # Callbacks in Flutter Date Range Picker (SfDateRangePicker) -Calendar supports the `ViewChangedCallback` and `SelectionChangedCallback` 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 + The [onViewChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onViewChanged.html) callback triggers when the current view swiped to previous or next view, picker view switched to another picker view. -* `visibleDateRange` - returns the start and end dates of the current visible month. +* [visibleDateRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerViewChangedArgs/visibleDateRange.html) - returns the start and end dates of the current visible month. {% tabs %} {% highlight dart hl_lines="6 7 8" %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - onViewChanged: (DateRangePickerViewChangedArgs args) { - var visibleDates = args.visibleDateRange; - }, - ), - ); -} + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + onViewChanged: (DateRangePickerViewChangedArgs args) { + var visibleDates = args.visibleDateRange; + }, + ), + ); + } {% endhighlight %} {% endtabs %} @@ -37,6 +39,7 @@ Widget build(BuildContext context) { * Use [HijriDatePickerViewChangedArgs](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerViewChangedArgs-class.html) for the [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html). ## 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. * `args.value` - returns the dates based on the selection mode. @@ -44,27 +47,27 @@ The [onSelectionChanged](https://pub.dev/documentation/syncfusion_flutter_datepi {% tabs %} {% highlight dart hl_lines="7 8 9 10 11 12 13 14 15 16 17 18" %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - selectionMode: DateRangePickerSelectionMode.range, - onSelectionChanged: (DateRangePickerSelectionChangedArgs args) { - if (args.value is PickerDateRange) { - final DateTime rangeStartDate = args.value.startDate; - final DateTime rangeEndDate = args.value.endDate; - } else if (args.value is DateTime) { - final DateTime selectedDate = args.value; - } else if (args.value is List) { - final List selectedDates = args.value; - } else { - final List selectedRanges = args.value; - } - }, - ), - ); -} + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + selectionMode: DateRangePickerSelectionMode.range, + onSelectionChanged: (DateRangePickerSelectionChangedArgs args) { + if (args.value is PickerDateRange) { + final DateTime rangeStartDate = args.value.startDate; + final DateTime rangeEndDate = args.value.endDate; + } else if (args.value is DateTime) { + final DateTime selectedDate = args.value; + } else if (args.value is List) { + final List selectedDates = args.value; + } else { + final List selectedRanges = args.value; + } + }, + ), + ); + } {% endhighlight %} {% endtabs %} diff --git a/Flutter/DateRangePicker/accessibility.md b/Flutter/DateRangePicker/accessibility.md index fbf63fb41..4e0ae6cea 100644 --- a/Flutter/DateRangePicker/accessibility.md +++ b/Flutter/DateRangePicker/accessibility.md @@ -10,7 +10,7 @@ documentation: ug # Accessibility in Flutter DateRangePicker (SfDateRangePicker) ## Screen reader support -The `SfDateRangePicker` can easily be accessed by screen readers. Please find the following table to get spoken feedback about the inner element contents of the screen. +The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) can easily be accessed by screen readers. Please find the following table to get spoken feedback about the inner element contents of the screen. ### Month view @@ -56,7 +56,7 @@ The `SfDateRangePicker` can easily be accessed by screen readers. Please find th ## Sufficient contrast -The `SfDateRangePicker` [theming](https://help.syncfusion.com/flutter/themes) support offers a consistent and standardized look, as well as the ability to set the colors for all the UI elements. +The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) [theming](https://help.syncfusion.com/flutter/themes) support offers a consistent and standardized look, as well as the ability to set the colors for all the UI elements. The following APIs allows you to customize the colors of the following elements. * [viewHeaderStyle](https://help.syncfusion.com/flutter/daterangepicker/headers#view-header) @@ -75,7 +75,7 @@ The following APIs allows you to customize the colors of the following elements. ## Large fonts -The `SfDateRangePicker` font size can be adjusted automatically based on device settings and the font size scaled based on the `MediaQueryData.textScaleFactor`. 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 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) @@ -89,7 +89,7 @@ The `SfDateRangePicker` font size can be adjusted automatically based on device ## Keyboard navigation -The following keyboard interactions are supported by the `SfDateRangePicker`. +The following keyboard interactions are supported by the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). | Key | Description | |-----------------------|----------------------------------------------------------------------------------------------------------------| diff --git a/Flutter/DateRangePicker/builders.md b/Flutter/DateRangePicker/builders.md index 14749b95b..3fe7ffccb 100644 --- a/Flutter/DateRangePicker/builders.md +++ b/Flutter/DateRangePicker/builders.md @@ -7,9 +7,11 @@ control: SfDateRangePicker documentation: ug --- # Builders in Flutter Date Range Picker (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. ## 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). [DateRangePickerCellDetails](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerCellDetails-class.html): Returns the details of the cell. @@ -29,63 +31,56 @@ class MyAppState extends State { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( - body: SafeArea( - child: SfDateRangePicker( - controller: _controller, - cellBuilder: - (BuildContext context, DateRangePickerCellDetails details) { - final bool isToday = isSameDate(details.date, DateTime.now()); - final bool isBlackOut = isBlackedDate(details.date); - final bool isSpecialDate = isSpecialDay(details.date); - return Container( - margin: EdgeInsets.all(2), - padding: EdgeInsets.only(top: 10), - decoration: BoxDecoration( + body: SafeArea( + child: SfDateRangePicker( + controller: _controller, + cellBuilder: ( + BuildContext context, + DateRangePickerCellDetails details, + ) { + final bool isToday = isSameDate(details.date, DateTime.now()); + final bool isBlackOut = isBlackedDate(details.date); + final bool isSpecialDate = isSpecialDay(details.date); + return Container( + margin: EdgeInsets.all(2), + padding: EdgeInsets.only(top: 10), + decoration: BoxDecoration( color: Colors.blueAccent, - border: isToday - ? Border.all(color: Colors.black, width: 2) - : null), - child: Column( - mainAxisSize: MainAxisSize.max, - mainAxisAlignment: MainAxisAlignment.spaceAround, - children: [ - Text( - details.date.day.toString(), - style: TextStyle( - fontSize: 13, - fontWeight: FontWeight.bold, + border: + isToday + ? Border.all(color: Colors.black, width: 2) + : null, + ), + child: Column( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.spaceAround, + children: [ + Text( + details.date.day.toString(), + style: TextStyle( + fontSize: 13, + fontWeight: FontWeight.bold, + ), ), - ), - isBlackOut - ? Icon( - Icons.block_sharp, - size: 13, + isBlackOut + ? Icon(Icons.block_sharp, size: 13) + : isSpecialDate + ? Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon(Icons.cake, size: 13), + Icon(Icons.celebration, size: 13), + Icon(Icons.audiotrack, size: 13), + ], ) - : isSpecialDate - ? Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Icon( - Icons.cake, - size: 13, - ), - Icon( - Icons.celebration, - size: 13, - ), - Icon( - Icons.audiotrack, - size: 13, - ) - ], - ) - : Container() - ], - ), - ); - }, + : Container(), + ], + ), + ); + }, + ), ), - )), + ), ); } @@ -114,18 +109,17 @@ class MyAppState extends State { } } - {% endhighlight %} {% endtabs %} ![Cell builder](images/builders/cell-builder.jpg) >**NOTE** -* Use [HijriDateRangePickerCellDetails]() for the [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html). +* Use [HijriDateRangePickerCellDetails](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDateRangePickerCellDetails-class.html) for the [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html). ## See also * [How to customize the date range picker cells using builder in the Flutter (SfDateRangePicker)](https://support.syncfusion.com/kb/article/10711/how-to-customize-the-date-range-picker-cells-using-builder-in-the-flutter-sfdaterangepicker) * [How to create timeline Date Picker in Flutter](https://support.syncfusion.com/kb/article/10992/how-to-create-timeline-date-picker-in-flutter) -* [How to customize the special dates using builder in the Flutter Date Range Picker](https://support.syncfusion.com/kb/article/10750/how-to-customize-the-special-dates-using-builder-in-the-flutter-date-range-picker) \ No newline at end of file +* [How to customize the special dates using builder in the Flutter Date Range Picker](https://support.syncfusion.com/kb/article/10750/how-to-customize-the-special-dates-using-builder-in-the-flutter-date-range-picker) diff --git a/Flutter/DateRangePicker/customizations.md b/Flutter/DateRangePicker/customizations.md index 3798e2c6a..7a5638f33 100644 --- a/Flutter/DateRangePicker/customizations.md +++ b/Flutter/DateRangePicker/customizations.md @@ -8,58 +8,72 @@ documentation: ug --- # Customizations in Flutter Date Range Picker (SfDateRangePicker) + You can customize the month and year cells, month format, and selection cells in [Flutter Date Range Picker](https://www.syncfusion.com/flutter-widgets/flutter-daterangepicker) (SfDateRangePicker). ## Month cell customization -You can customize the calendar month view by using the `monthCellStyle` of `SfDateRangePicker`. -* **Current month dates** – You can customize the current month date's text style and background of the `DateRangePicker` by using the [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/textStyle.html) and [cellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/cellDecoration.html) properties of [DateRangePickerMonthCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle-class.html) +You can customize the calendar month view 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). + +* **Current month dates** – You can customize the current month date's text style and background of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using the [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/textStyle.html) and [cellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/cellDecoration.html) properties of [DateRangePickerMonthCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle-class.html) -* **Today date** – You can customize the today date text style and background of the `DateRangePicker` by using the [todayTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/todayTextStyle.html) and [todayCellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/todayCellDecoration.html). +* **Today date** – You can customize the today date text style and background of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using the [todayTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/todayTextStyle.html) and [todayCellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/todayCellDecoration.html). -* **Leading dates** – You can hide the leading dates by using the [showTrailingAndLeadingDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/showTrailingAndLeadingDates.html) property in the [DateRangePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings-class.html) class. You can also customize the leading month dates text style and background of the `DateRangePicker` by using the [leadingDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/leadingDatesTextStyle.html) and [leadingDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/leadingDatesDecoration.html). +* **Leading dates** – You can hide the leading dates by using the [showTrailingAndLeadingDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/showTrailingAndLeadingDates.html) property in the [DateRangePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings-class.html) class. You can also customize the leading month dates text style and background of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using the [leadingDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/leadingDatesTextStyle.html) and [leadingDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/leadingDatesDecoration.html). -* **Trailing dates** - You can hide the trailing dates by using `showTrailingAndLeadingDates` dates property in `DateRangePickerMonthViewSettings` class. You can also customize the trailing month dates text style and background of the `DateRangePicker` by using the [trailingDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/trailingDatesTextStyle.html) and [trailingDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/trailingDatesDecoration.html). +* **Trailing dates** - You can hide the trailing dates by using [showTrailingAndLeadingDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/showTrailingAndLeadingDates.html) dates property in [DateRangePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings-class.html) class. You can also customize the trailing month dates text style and background of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using the [trailingDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/trailingDatesTextStyle.html) and [trailingDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/trailingDatesDecoration.html). -* **Blackout Dates** - You can customize the blackout dates text style and background of the `DateRangePicker` by using the [blackoutDateTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/blackoutDateTextStyle.html) and [blackoutDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/blackoutDatesDecoration.html). +* **Blackout Dates** - You can customize the blackout dates text style and background of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using the [blackoutDateTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/blackoutDateTextStyle.html) and [blackoutDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/blackoutDatesDecoration.html). -* **Disabled dates** – Disable dates text style and background of the `minDate` and `maxDate` in the `DateRangePicker`, and the dates which are disabled by the `selectableDayPredicate` callback are customized by using [disableDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/disabledDatesTextStyle.html) and [disableDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/disabledDatesDecoration.html). +* **Disabled dates** – Disable dates text style and background of the [minDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/minDate.html) and [maxDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/maxDate.html) in the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html), and the dates which are disabled by the [selectableDayPredicate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectableDayPredicate.html) callback are customized by using [disableDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/disabledDatesTextStyle.html) and [disableDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/disabledDatesDecoration.html). -* **Special Dates** – You can add special dates to the `DateRangePicker` by using [specialDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/specialDates.html) property, and you can also customize the special dates text style and background by using the [specialDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/specialDatesTextStyle.html) and [specialDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/specialDatesDecoration.html). +* **Special Dates** – You can add special dates to the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using [specialDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/specialDates.html) property, and you can also customize the special dates text style and background by using the [specialDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/specialDatesTextStyle.html) and [specialDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/specialDatesDecoration.html). -* **Weekend Dates** – You can change weekend dates to `DateRangePicker` by using the [weekendDays](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/weekendDays.html) property, and you can also customize the weekend dates text style and background by using the [weekendDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/weekendTextStyle.html) and [weekendDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/weekendDatesDecoration.html). +* **Weekend Dates** – You can change weekend dates to [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using the [weekendDays](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/weekendDays.html) property, and you can also customize the weekend dates text style and background by using the [weekendDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/weekendTextStyle.html) and [weekendDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/weekendDatesDecoration.html). {% tabs %} {% highlight dart hl_lines="6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26" %} -@override -Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - monthViewSettings:DateRangePickerMonthViewSettings(blackoutDates:[DateTime(2020, 03, 26)], - weekendDays: [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), + body: SfDateRangePicker( + view: DateRangePickerView.month, + monthViewSettings: DateRangePickerMonthViewSettings( + blackoutDates: [DateTime(2020, 03, 26)], + weekendDays: [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), + ), + ), ); -} + } {% endhighlight %} {% endtabs %} @@ -70,20 +84,21 @@ Widget build(BuildContext context) { * Based on the given decoration, cell decoration will be rendered in the following order: blackout dates, special dates, disable dates, today date, weekend dates, leading or trailing dates, and dates decoration. ## Month format -You can customize the month format of the `DateRangePicker` using the [monthFormat](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/monthFormat.html) property. + +You can customize the month format of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) using the [monthFormat](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/monthFormat.html) property. {% tabs %} {% highlight dart hl_lines="6" %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - monthFormat: 'MMM', - ), - ); -} + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + monthFormat: 'MMM', + ), + ); + } {% endhighlight %} {% endtabs %} @@ -92,32 +107,33 @@ Widget build(BuildContext context) { ## Selection cell customization -You can also customize the date range picker section by using the `monthCellStyle` of `SfDateRangePicker`. +You can also customize the date range picker selected cell 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` that is applicable for `selectionMode` is `single` and `multiple`, it is also applicable to start and end of the selected range text style in the `single` and `multi-range` selection. +* **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. -* **Selection color** – Selected date background color can be customized using the [selectionColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionColor.html) property of `SfDateRangePicker` that is applicable for `single` and `multiple` selections. +* **Selection color** – Selected date background color can be customized using the [selectionColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionColor.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) that is applicable for [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) selections. -* **Range selection text style** – Range selection date text style can be customized using the [rangeTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/rangeTextStyle.html) property that is applicable when `selectionMode` is `range` or `multi-range`. +* **Range selection text style** – Range selection date text style can be customized using the [rangeTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/rangeTextStyle.html) property that is applicable when [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionMode.html) is [range](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#range) or [multiRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiRange). -* **Range selection color** - Range selection color text style can be customized using the [startRangeSelectionColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/startRangeSelectionColor.html), [endRangeSelectionColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/endRangeSelectionColor.html) , [rangeSelectionColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/rangeSelectionColor.html) properties that is applicable when `selectionMode` is in `range` or `multi-range`. +* **Range selection color** - Range selection color text style can be customized using the [startRangeSelectionColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/startRangeSelectionColor.html), [endRangeSelectionColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/endRangeSelectionColor.html) , [rangeSelectionColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/rangeSelectionColor.html) properties that is applicable when [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionMode.html) is in [range](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#range) or [multiRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiRange). {% tabs %} {% highlight dart hl_lines="7 8 9 10 11 12" %} -@override + @override Widget build(BuildContext context) { return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - selectionMode: DateRangePickerSelectionMode.range, - selectionTextStyle: const TextStyle(color: Colors.white), - selectionColor: Colors.blue, - startRangeSelectionColor: Colors.purple, - endRangeSelectionColor: Colors.purple, - rangeSelectionColor: Colors.purpleAccent, - rangeTextStyle: const TextStyle(color: Colors.white, fontSize: 20), - )); + body: SfDateRangePicker( + view: DateRangePickerView.month, + selectionMode: DateRangePickerSelectionMode.range, + selectionTextStyle: const TextStyle(color: Colors.white), + selectionColor: Colors.blue, + startRangeSelectionColor: Colors.purple, + endRangeSelectionColor: Colors.purple, + rangeSelectionColor: Colors.purpleAccent, + rangeTextStyle: const TextStyle(color: Colors.white, fontSize: 20), + ), + ); } {% endhighlight %} @@ -126,46 +142,50 @@ You can also customize the date range picker section by using the `monthCellStyl ![Month Selection cell customization Date Range Picker](images/customizations/monthcell_selection_customization.png) ## Year cell customization -You can customize the calendar `year`, `decade`, and `century` view by using the `yearCellStyle` of `SfDateRangePicker`. -* **Current year** – You can customize current month dates text style and background of the `DateRangePicker` by using the [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/textStyle.html) and [cellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/cellDecoration.html) properties of [DateRangePickerYearCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerYearCellStyle-class.html) +You can customize the calendar `year`, `decade`, and `century` view by using the [yearCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/yearCellStyle.html) of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). + +* **Current year** – You can customize current month dates text style and background of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using the [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/textStyle.html) and [cellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/cellDecoration.html) properties of [DateRangePickerYearCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerYearCellStyle-class.html) -* **Disabled dates** – Disable dates text style and background of the `minDate` and `maxDate` in the `DateRangePicker`, and the dates which are disabled by the `selectableDayPredicate` callback are customized by using [disableDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/disabledDatesTextStyle.html) and [disableDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/disabledDatesDecoration.html). +* **Disabled dates** – Disable dates text style and background of the [minDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/minDate.html) and [maxDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/maxDate.html) in the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html), and the dates which are disabled by the [selectableDayPredicate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectableDayPredicate.html) callback are customized by using [disabledDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/disabledDatesTextStyle.html) and [disabledDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/disabledDatesDecoration.html). -* **Leading dates** – You can also customize the leading month dates text style and background of the `DateRangePicker` by using the [leadingDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/leadingDatesTextStyle.html) and [leadingDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/leadingDatesDecoration.html). +* **Leading dates** – You can also customize the leading month dates text style and background of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using the [leadingDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/leadingDatesTextStyle.html) and [leadingDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/leadingDatesDecoration.html). -* **Today date** – You can customize the today date text style and background of the `DateRangePicker` by using the [todayTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/todayTextStyle.html) and [todayCellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/todayCellDecoration.html). +* **Today date** – You can customize the today date text style and background of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using the [todayTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/todayTextStyle.html) and [todayCellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/todayCellDecoration.html). {% tabs %} {% highlight dart hl_lines="7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24" %} -@override -Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( - body: SfDateRangePicker( + body: SfDateRangePicker( view: DateRangePickerView.month, selectionMode: DateRangePickerSelectionMode.range, yearCellStyle: DateRangePickerYearCellStyle( - disabledDatesDecoration:BoxDecoration( - color: const Color(0xFFDFDFDF), - border: Border.all(color: const Color(0xFFB6B6B6), width: 1), - shape: BoxShape.circle), - disabledDatesTextStyle: const TextStyle(color: Colors.black), - leadingDatesDecoration:BoxDecoration( - color: const Color(0xFFDFDFDF), - border: Border.all(color: const Color(0xFFB6B6B6), width: 1), - shape: BoxShape.circle), - leadingDatesTextStyle: const TextStyle(color: Colors.black), - textStyle: const TextStyle(color: Colors.blue), - todayCellDecoration: BoxDecoration( - color: const Color(0xFFDFDFDF), - border: Border.all(color: const Color(0xFFB6B6B6), width: 1), - shape: BoxShape.circle), - todayTextStyle: const TextStyle(color: Colors.purple), - ) - ), - ); -} + disabledDatesDecoration: BoxDecoration( + color: const Color(0xFFDFDFDF), + border: Border.all(color: const Color(0xFFB6B6B6), width: 1), + shape: BoxShape.circle, + ), + disabledDatesTextStyle: const TextStyle(color: Colors.black), + leadingDatesDecoration: BoxDecoration( + color: const Color(0xFFDFDFDF), + border: Border.all(color: const Color(0xFFB6B6B6), width: 1), + shape: BoxShape.circle, + ), + leadingDatesTextStyle: const TextStyle(color: Colors.black), + textStyle: const TextStyle(color: Colors.blue), + todayCellDecoration: BoxDecoration( + color: const Color(0xFFDFDFDF), + border: Border.all(color: const Color(0xFFB6B6B6), width: 1), + shape: BoxShape.circle, + ), + todayTextStyle: const TextStyle(color: Colors.purple), + ), + ), + ); + } {% endhighlight %} {% endtabs %} @@ -185,4 +205,4 @@ Widget build(BuildContext context) { * [How to add the indicator in the month cells of the date range picker (SfDateRangePicker), when the Flutter event calendar (SfCalendar) has an appointments?](https://support.syncfusion.com/kb/article/10500/how-to-add-the-indicator-in-the-month-cells-of-the-date-range-picker-sfdaterangepicker-when) * [How to add custom fonts in Flutter date range picker (SfDateRangePicker)](https://support.syncfusion.com/kb/article/10705/how-to-add-custom-fonts-in-the-flutter-date-range-picker-sfdaterangepicker) * [How to style the year, decade, century views in the Flutter date range picker (SfDateRangePicker)](https://support.syncfusion.com/kb/article/10789/how-to-style-the-year-decade-century-views-in-the-flutter-date-range-picker) -* [How to customize the special dates using builder in the Flutter date picker](https://support.syncfusion.com/kb/article/10750/how-to-customize-the-special-dates-using-builder-in-the-flutter-date-range-picker) \ No newline at end of file +* [How to customize the special dates using builder in the Flutter date picker](https://support.syncfusion.com/kb/article/10750/how-to-customize-the-special-dates-using-builder-in-the-flutter-date-range-picker) diff --git a/Flutter/DateRangePicker/date-navigations.md b/Flutter/DateRangePicker/date-navigations.md index 98e293c9c..41ed67325 100644 --- a/Flutter/DateRangePicker/date-navigations.md +++ b/Flutter/DateRangePicker/date-navigations.md @@ -10,6 +10,7 @@ documentation: ug # Date Navigations in Flutter Date Range Picker (SfDateRangePicker) ## Programmatic date navigation + You can programmatically navigate dates in the calendar widget by using the [displayDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/displayDate.html) property of [DateRangePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController-class.html) {% tabs %} @@ -43,7 +44,8 @@ class MyAppState extends State { ![Displaydate Date Range Picker](images/date-navigations/displaydate.png) ## Programmatic view navigation -You can programmatically navigate view in the calendar widget by using the [view](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/view.html) property of `DateRangePickerController`. + +You can programmatically navigate view in the calendar widget by using the [view](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/view.html) property of [DateRangePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController-class.html). {% tabs %} {% highlight dart hl_lines="2 6 15" %} @@ -61,9 +63,7 @@ class MyAppState extends State { Widget build(BuildContext context) { return MaterialApp( home: Scaffold( - body: SfDateRangePicker( - controller: _datePickerController, - ), + body: SfDateRangePicker(controller: _datePickerController), ), ); } @@ -75,30 +75,34 @@ class MyAppState extends State { ![View navigation Date Range Picker](images/date-navigations/monthview.png) ## Allow view navigation -You can allow or restrict the built-in view navigation to any picker views by using the [enableViewNavigation](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/allowViewNavigation.html) property of `SfDateRangePicker`. It allows you to restrict the built-in view switching through touch interaction and allow you to select the cells in the year, decade and century views. + +You can allow or restrict the built-in view navigation to any picker views by using the [enableViewNavigation](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/allowViewNavigation.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). It allows you to restrict the built-in view switching through touch interaction and allow you to select the cells in the year, decade and century views. {% tabs %} {% highlight dart hl_lines="5" %} -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: SfDateRangePicker( - allowViewNavigation: false, + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfDateRangePicker( + allowViewNavigation: false + ) ), - ), - ); -} + ); + } {% endhighlight %} {% endtabs %} ## Programmatic date selection -You can programmatically select the dates in the calendar widget by using the `DateRangePickerController` property. + +You can programmatically select the dates in the calendar widget by using the [DateRangePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController-class.html) property. ### Single selection -Initially or during the run time,you can select the date programmatically by using the [selectedDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedDate.html) of `DateRangePickerController` property. It is only applicable when the [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionMode.html) is set to `DateRangePickerSelectionMode.single`. + +Initially or during the run time, you can select the date programmatically by using the [selectedDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedDate.html) of [DateRangePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController-class.html) property. It is only applicable when the [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionMode.html) is set to [DateRangePickerSelectionMode.single](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#single). {% tabs %} {% highlight dart hl_lines="6 10 20 21" %} @@ -107,12 +111,13 @@ class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } + class _MyAppState extends State { DateRangePickerController _datePickerController = DateRangePickerController(); @override initState() { - _datePickerController.selectedDate =DateTime.now().add(Duration(days: 2)); + _datePickerController.selectedDate = DateTime.now().add(Duration(days: 2)); super.initState(); } @@ -120,11 +125,11 @@ class _MyAppState extends State { Widget build(BuildContext context) { return MaterialApp( home: Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - selectionMode: DateRangePickerSelectionMode.single, - controller: _datePickerController, - ) + body: SfDateRangePicker( + view: DateRangePickerView.month, + selectionMode: DateRangePickerSelectionMode.single, + controller: _datePickerController, + ), ), ); } @@ -136,7 +141,8 @@ class _MyAppState extends State { ![Programmatic selected date in Date Range Picker](images/date-navigations/programmatic_selecteddate.png) ### Multi selection -Initially or during the run time, you can selects the multiple dates programmatically by using the [selectedDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedDates.html) of `DateRangePickerController` property. It is only applicable when the `selectionMode` is set to `DateRangePickerSelectionMode.multiple`. + +Initially or during the run time, you can selects the multiple dates programmatically by using the [selectedDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedDates.html) of [DateRangePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController-class.html) property. It is only applicable when the [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionMode.html) is set to [DateRangePickerSelectionMode.multiple](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiple). {% tabs %} {% highlight dart hl_lines="6 10 11 12 13 14 15 25 26" %} @@ -145,16 +151,17 @@ class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } + class _MyAppState extends State { DateRangePickerController _datePickerController = DateRangePickerController(); @override initState() { - _datePickerController.selectedDates =[ + _datePickerController.selectedDates = [ DateTime.now().add(Duration(days: 2)), DateTime.now().add(Duration(days: 4)), DateTime.now().add(Duration(days: 7)), - DateTime.now().add(Duration(days: 11)) + DateTime.now().add(Duration(days: 11)), ]; super.initState(); } @@ -163,11 +170,11 @@ class _MyAppState extends State { Widget build(BuildContext context) { return MaterialApp( home: Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - selectionMode: DateRangePickerSelectionMode.multiple, - controller: _datePickerController, - ) + body: SfDateRangePicker( + view: DateRangePickerView.month, + selectionMode: DateRangePickerSelectionMode.multiple, + controller: _datePickerController, + ), ), ); } @@ -179,7 +186,8 @@ class _MyAppState extends State { ![Programmatic multiple dates selection Date Range Picker](images/date-navigations/programmatic_multiple_selection.png) ### Range selection -Initially or during run time, you can selects the single date range programmatically by using the [selectedRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedRange.html) of `DateRangePickerController` property. It is only applicable when the `selectionMode` is set to `DateRangePickerSelectionMode.range` + +Initially or during run time, you can selects the single date range programmatically by using the [selectedRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedRange.html) of [DateRangePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController-class.html) property. It is only applicable when the [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionMode.html) is set to [DateRangePickerSelectionMode.range](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#range). {% tabs %} {% highlight dart hl_lines="2 6 7 17 18" %} @@ -214,7 +222,8 @@ class MyAppState extends State { ![Programmatic selectedrange Date Range Picker](images/date-navigations/programmatic-range selection.png) ### Multi Range selection -Initially or during run time, you can selects more than one date range programmatically by using the [selectedRanges](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedRanges.html) of `DateRangePickerController` property. It is only applicable when the `selectionMode` is set to `DateRangePickerSelectionMode.multiRange`. + +Initially or during run time, you can selects more than one date range programmatically by using the [selectedRanges](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedRanges.html) of [DateRangePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController-class.html) property. It is only applicable when the [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionMode.html) is set to [DateRangePickerSelectionMode.multiRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiRange). {% tabs %} {% highlight dart hl_lines="6 10 11 12 13 14 15 25 26" %} @@ -223,6 +232,7 @@ class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } + class _MyAppState extends State { DateRangePickerController _datePickerController = DateRangePickerController(); @@ -241,11 +251,11 @@ class _MyAppState extends State { Widget build(BuildContext context) { return MaterialApp( home: Scaffold( - body:SfDateRangePicker( - view: DateRangePickerView.month, - selectionMode: DateRangePickerSelectionMode.multiRange, - controller: _datePickerController, - ) + body:SfDateRangePicker( + view: DateRangePickerView.month, + selectionMode: DateRangePickerSelectionMode.multiRange, + controller: _datePickerController, + ) ), ); } @@ -257,10 +267,12 @@ class _MyAppState extends State { ![Programmatic multi selectedrange Date Range Picker](images/date-navigations/programmatic_multirangeselection.png) ## Programmatically change to adjacent dates -By default, the date can be navigated to next and previous views using the touch gesture, by swiping the control from right to left and left to right direction. The view can be also changed programmatically using the [forward](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/forward.html) and [backward](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/backward.html) methods that are available in the `DateRangePickerController`. + +By default, the date can be navigated to next and previous views using the touch gesture, by swiping the control from right to left and left to right direction. The view can be also changed programmatically using the [forward](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/forward.html) and [backward](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/backward.html) methods that are available in the [DateRangePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController-class.html). ### Forward -You can use the `forward` method of `DateRangePickerController` for viewing the next immediate next visible dates in the `SfDateRangePicker`. It will move to next month if the calendar view is a month, similarly it will move to next week for week view and next day for day view. + +You can use the [forward](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/forward.html) method of [DateRangePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController-class.html) for viewing the next immediate next visible dates in the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). It will move to next month if the calendar view is a month. {% tabs %} {% highlight dart hl_lines="2 13 20" %} @@ -295,7 +307,8 @@ class MyAppState extends State { {% endtabs %} ### Backward -You can use the `backward` method of `DateRangePickerController` for viewing the previous immediate previous visible dates in the `SfDateRangePicker`. It will move to the previous month if the calendar view is in month, similarly it will move to the previous week for week view and previous day for day view. + +You can use the [backward](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/backward.html) method of [DateRangePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController-class.html) for viewing the previous immediate previous visible dates in the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). It will move to the previous month if the calendar view is in month. {% tabs %} {% highlight dart hl_lines="2 14 21" %} @@ -332,38 +345,43 @@ class MyAppState extends State { ## Navigation direction -You can navigate the Month, Year, Decade, and Century views either `Vertical` or `Horizontal` directions by setting the [navigationDirection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/navigationDirection.html) property of `DateRangePicker`. + +You can navigate the Month, Year, Decade, and Century views either [Vertical](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerNavigationDirection.html#vertical) or [Horizontal](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerNavigationDirection.html#horizontal) directions by setting the [navigationDirection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/navigationDirection.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). {% tabs %} {% highlight dart hl_lines="6" %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfDateRangePicker( view: DateRangePickerView.month, - navigationDirection: DateRangePickerNavigationDirection.vertical), - ); -} + navigationDirection: DateRangePickerNavigationDirection.vertical, + ), + ); + } {% endhighlight %} {% endtabs %} ## Navigation mode -You can customize the navigation mode of the date range picker by using the [navigationMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/navigationMode.html) property of `SfDateRangePicker`, which has options to disable the view navigation using the swipe interaction, also allows to scroll the view. By default, the `navigationMode` is set to [DateRangePickerNavigationMode.snap](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerNavigationMode.html). + +You can customize the navigation mode of the date range picker by using the [navigationMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/navigationMode.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html), which has options to disable the view navigation using the swipe interaction, also allows to scroll the view. By default, the [navigationMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/navigationMode.html) is set to [DateRangePickerNavigationMode.snap](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerNavigationMode.html). {% tabs %} {% highlight dart hl_lines="7" %} -@override -Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return MaterialApp( - home: Scaffold( - body: SfDateRangePicker( - navigationDirection: DateRangePickerNavigationDirection.vertical, - navigationMode: DateRangePickerNavigationMode.scroll, - ),),); + home: Scaffold( + body: SfDateRangePicker( + navigationDirection: DateRangePickerNavigationDirection.vertical, + navigationMode: DateRangePickerNavigationMode.scroll, + ), + ), + ); } {% endhighlight %} @@ -372,27 +390,28 @@ Widget build(BuildContext context) { ![navigationMode](images/date-navigations/navigation_mode.gif) >**NOTE** -When the navigation mode is set to `DateRangePickerNavigationMode.scroll`. +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` 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. ## Show navigation arrow -Using the [showNavigationArrow](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/showNavigationArrow.html) property of the `DateRangePicker` you can move to the next or previous views of the picker without swiping. + +Using the [showNavigationArrow](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/showNavigationArrow.html) property of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) you can move to the next or previous views of the picker without swiping. {% tabs %} {% highlight dart hl_lines="6" %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - showNavigationArrow: true, - ), - ); -} + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + showNavigationArrow: true, + ), + ); + } {% endhighlight %} {% endtabs %} @@ -409,4 +428,4 @@ Widget build(BuildContext context) { * [How to navigate to the previous or next views using navigation arrows in the Flutter date range picker (SfDateRangePicker)](https://support.syncfusion.com/kb/article/10690/how-to-navigate-to-the-previous-or-next-views-using-navigation-arrows-in-the-flutter-date) * [How to restrict the year view navigation while tapping header of the Flutter date range picker (SfDateRangePicker)](https://support.syncfusion.com/kb/article/10509/how-to-restrict-the-year-view-navigation-while-tapping-header-of-the-flutter-date-range) * [How to select previous or next dates based on the selected date in the Flutter date range picker (SfDateRangePicker)](https://support.syncfusion.com/kb/article/10727/how-to-select-previous-or-next-dates-based-on-the-selected-date-in-the-flutter-date-range) -* [How to restrict the view navigation in the Flutter Date Range Picker](https://support.syncfusion.com/kb/article/10976/how-to-restrict-the-view-navigation-in-the-flutter-date-range-picker) \ No newline at end of file +* [How to restrict the view navigation in the Flutter Date Range Picker](https://support.syncfusion.com/kb/article/10976/how-to-restrict-the-view-navigation-in-the-flutter-date-range-picker) diff --git a/Flutter/DateRangePicker/date-restrictions.md b/Flutter/DateRangePicker/date-restrictions.md index cefb08ad1..983ce96f4 100644 --- a/Flutter/DateRangePicker/date-restrictions.md +++ b/Flutter/DateRangePicker/date-restrictions.md @@ -10,39 +10,41 @@ documentation: ug # Date Restrictions in Flutter Date Range Picker (SfDateRangePicker) ## Minimum display date -The [minDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/minDate.html) will restrict `backward` date navigations features, and cannot swipe the control using the touch gesture beyond the min date range in all views. + +The [minDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/minDate.html) will restrict [backward](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/backward.html) date navigations features, and cannot swipe the control using the touch gesture beyond the min date range in all views. {% tabs %} {% highlight dart hl_lines="6" %} -@override -Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - minDate: DateTime(2020, 03, 05, 10 , 0, 0), - ) - ); -} + body: SfDateRangePicker( + view: DateRangePickerView.month, + minDate: DateTime(2020, 03, 05, 10, 0, 0), + ), + ); + } {% endhighlight %} {% endtabs %} ## Maximum display date -The [maxDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/maxDate.html) will restrict `forward` date navigations features, and cannot swipe the control using the touch gesture beyond the max date range in all views. + +The [maxDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/maxDate.html) will restrict [forward](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/forward.html) date navigations features, and cannot swipe the control using the touch gesture beyond the max date range in all views. {% tabs %} {% highlight dart hl_lines="6" %} -@override -Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - maxDate: DateTime(2020, 03, 25, 10 , 0, 0), - ) - ); -} + body: SfDateRangePicker( + view: DateRangePickerView.month, + maxDate: DateTime(2020, 03, 25, 10, 0, 0), + ), + ); + } {% endhighlight %} {% endtabs %} @@ -51,20 +53,20 @@ Widget build(BuildContext context) { ## Enable and disable past dates -The `DateRangePicker` allows you to enable or disable the past dates from today's date in `MonthView`. This can be achieved by changing the [enablePastDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/enablePastDates.html) property. By default, the value of this property is set to true. +The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) allows you to enable or disable the past dates from today's date in `MonthView`. This can be achieved by changing the [enablePastDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/enablePastDates.html) property. By default, the value of this property is set to true. {% tabs %} {% highlight dart hl_lines="6" %} -@override -Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - enablePastDates : false, - ) - ); -} + body: SfDateRangePicker( + view: DateRangePickerView.month, + enablePastDates: false, + ), + ); + } {% endhighlight %} {% endtabs %} @@ -72,48 +74,58 @@ Widget build(BuildContext context) { ![Enable and disable past dates Range Picker](images/date-restrictions/enable_diasable_pastdates.png) ## Blackout Dates -In `DateRangePicker`, [blackoutDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/blackoutDates.html) refer to the disabled dates that restrict the user from selecting it. These dates will be marked with Strikethrough. + +In [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html), [blackoutDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/blackoutDates.html) refer to the disabled dates that restrict the user from selecting it. These dates will be marked with Strikethrough. {% tabs %} {% highlight dart hl_lines="6" %} -@override -Widget build(BuildContext context) { - return Scaffold( + @override + Widget build(BuildContext context) { + return Scaffold( body: SfDateRangePicker( view: DateRangePickerView.year, - monthViewSettings: DateRangePickerMonthViewSettings(blackoutDates:[DateTime(2020, 03, 18), DateTime(2020, 03, 19)]), - ) - ); -} + monthViewSettings: DateRangePickerMonthViewSettings( + blackoutDates: [DateTime(2020, 03, 18), DateTime(2020, 03, 19)], + ), + ), + ); + } {% endhighlight %} {% endtabs %} ## 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` 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 date range picker. {% tabs %} {% highlight dart hl_lines="4 5 6 7 8 9" %} -@override -Widget build(BuildContext context) { - return Scaffold(body: SafeArea(child: Card(child: SfDateRangePicker( - selectableDayPredicate: (DateTime dateTime) { - if (dateTime == DateTime(2021, 9, 5)) { - return false; - } - return true; - }, - )))); -} + @override + Widget build(BuildContext context) { + return Scaffold( + body: SafeArea( + child: Card( + child: SfDateRangePicker( + selectableDayPredicate: (DateTime dateTime) { + if (dateTime == DateTime(2021, 9, 5)) { + return false; + } + return true; + }, + ), + ), + ), + ); + } {% endhighlight %} {% endtabs %} >**NOTE** -* Applicable for year, decade and century views only when the `allowViewNavigation` set as false. -* This callback is not applicable when the `navigationMode` set as `DateRangePickerNavigationMode.scroll`. +* Applicable for year, decade and century views only when the [allowViewNavigation](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/allowViewNavigation.html) set as false. +* This callback is not applicable when the [navigationMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/navigationMode.html) set as [DateRangePickerNavigationMode.scroll](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerNavigationMode.html#scroll). ![selectable day predicate Range Picker](images/date-restrictions/selectableDayPredicate.jpg) @@ -122,4 +134,4 @@ Widget build(BuildContext context) { * [How to enable or disable the past dates in the Flutter date range picker (SfDateRangePicker)](https://support.syncfusion.com/kb/article/10609/how-to-enable-or-disable-the-past-dates-in-the-flutter-date-range-picker-sfdaterangepicker) * [How to add active dates in the Flutter date range picker (SfDateRangePicker)](https://support.syncfusion.com/kb/article/10380/how-to-add-active-dates-in-the-flutter-date-range-picker-sfdaterangepicker) * [How to restrict date range picker within the date limit in Flutter date range picker (SfDateRangePicker)?](https://support.syncfusion.com/kb/article/10062/how-to-restrict-date-range-picker-within-the-date-limit-in-the-flutter-date-range-picker) -* [How to update blackout dates using onViewChanged callback in the Flutter date picker](https://support.syncfusion.com/kb/article/10751/how-to-update-blackout-dates-using-onviewchanged-callback-in-the-flutter-date-range-picker) \ No newline at end of file +* [How to update blackout dates using onViewChanged callback in the Flutter date picker](https://support.syncfusion.com/kb/article/10751/how-to-update-blackout-dates-using-onviewchanged-callback-in-the-flutter-date-range-picker) diff --git a/Flutter/DateRangePicker/getting-started.md b/Flutter/DateRangePicker/getting-started.md index e9b810db9..b5fa6d52c 100644 --- a/Flutter/DateRangePicker/getting-started.md +++ b/Flutter/DateRangePicker/getting-started.md @@ -8,6 +8,7 @@ documentation: ug --- # 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® date range picker widget. To get start quickly with our Flutter date range picker widget, you can check on this video. @@ -16,6 +17,7 @@ To get start quickly with our Flutter date range picker widget, you can check on ## Add Flutter Date Range Picker to an application + Create a simple project using the instructions given in the [Getting Started with your first Flutter app](https://docs.flutter.dev/get-started/test-drive#choose-your-ide) documentation. **Add dependency** @@ -61,13 +63,14 @@ After importing the package, initialize the date range picker widget as a child {% tabs %} {% highlight dart hl_lines="5" %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Container( - child: SfDateRangePicker(), -)); -} + @override + Widget build(BuildContext context) { + return Scaffold( + body: Container( + child: SfDateRangePicker() + ) + ); + } {% endhighlight %} {% endtabs %} @@ -76,19 +79,19 @@ Widget build(BuildContext context) { ## Multiple picker views -The [SfDateRangePicker](https://www.syncfusion.com/flutter-widgets/flutter-daterangepicker) 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" %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.year, + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.year ) - ); -} + ); + } {% endhighlight %} {% endtabs %} @@ -97,86 +100,89 @@ Widget build(BuildContext context) { ## Change first day of week -The DateRangePicker widget will be rendered with Sunday as the first day of the week, but you can customize it to any day by using the [firstDayOfWeek](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/firstDayOfWeek.html) property. +The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) widget will be rendered with Sunday as the first day of the week, but you can customize it to any day by using the [firstDayOfWeek](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/firstDayOfWeek.html) property. {% tabs %} {% highlight dart hl_lines="6" %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfDateRangePicker( view: DateRangePickerView.month, - monthViewSettings: DateRangePickerMonthViewSettings(firstDayOfWeek: 1), - ) + monthViewSettings: DateRangePickerMonthViewSettings( + firstDayOfWeek: 1 + ), + ), ); -} + } {% endhighlight %} {% endtabs %} ## Date selection -The [DateRangePicker](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 [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` 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 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" %} -void _onSelectionChanged(DateRangePickerSelectionChangedArgs args) { -// TODO: implement your code here -} + void _onSelectionChanged(DateRangePickerSelectionChangedArgs args) { + // TODO: implement your code here + } -@override -Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return MaterialApp( - home: Scaffold( - body: Container( - child: SfDateRangePicker( - onSelectionChanged: _onSelectionChanged, - selectionMode: DateRangePickerSelectionMode.range, - ), - ), + home: Scaffold( + body: Container( + child: SfDateRangePicker( + onSelectionChanged: _onSelectionChanged, + selectionMode: DateRangePickerSelectionMode.range, + ), ), + ), ); -} - + } {% endhighlight %} {% endtabs %} - ![Date selection Date Range Picker in Flutter.](images/getting-started/flutter-daterandepicker-range-selection.png) +![Date selection Date Range Picker in Flutter.](images/getting-started/flutter-daterandepicker-range-selection.png) ## 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`. It allows to confirm or cancel the selection values of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). +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). It allows to confirm or cancel the selection values of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). {% tabs %} {% highlight dart hl_lines="11" %} -@override + @override Widget build(BuildContext context) { return Scaffold( - body: TextButton( - child: Text('Show picker'), - onPressed: () { - showDialog( - context: context, - builder: (BuildContext context) { - return SfDateRangePicker( - showActionButtons: true, - onSubmit: (Object value) { - Navigator.pop(context); - }, - onCancel: () { - Navigator.pop(context); - }, - ); - }); - }, - )); - } + body: TextButton( + child: Text('Show picker'), + onPressed: () { + showDialog( + context: context, + builder: (BuildContext context) { + return SfDateRangePicker( + showActionButtons: true, + onSubmit: (Object value) { + Navigator.pop(context); + }, + onCancel: () { + Navigator.pop(context); + }, + ); + }, + ); + }, + ), + ); + } {% endhighlight %} {% endtabs %} @@ -184,20 +190,21 @@ You can display action buttons at the bottom of the date range picker by using t ![Show action buttons in Flutter Date Range Picker.](images/getting-started/flutter-daterangepicker-confirm-and-cancel-buttons.png) ## 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 `DateRangePicker`. It easily moves to the current date of the picker view. + +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. {% tabs %} {% highlight dart hl_lines="6" %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfDateRangePicker( view: DateRangePickerView.month, showTodayButton: true, - ) + ), ); -} + } {% endhighlight %} {% endtabs %} diff --git a/Flutter/DateRangePicker/headers.md b/Flutter/DateRangePicker/headers.md index 9ba90115f..41ee43b4e 100644 --- a/Flutter/DateRangePicker/headers.md +++ b/Flutter/DateRangePicker/headers.md @@ -8,23 +8,25 @@ documentation: ug --- # 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. ## Customize the header height -You can customize the height of the header of `DateRangePicker` by using the `headerHeight` property. + +You can customize the height of the header of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using the [headerHeight](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/headerHeight.html) property. {% tabs %} {% highlight dart hl_lines="6" %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - headerHeight: 100, - ), - ); -} + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + headerHeight: 100, + ), + ); + } {% endhighlight %} {% endtabs %} @@ -32,17 +34,18 @@ Widget build(BuildContext context) { ![Header height Date Range Picker](images/headers/headerheight.png) ## Header appearance -You can customize the header style of the `DataRangePicker` by using the [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerHeaderStyle/backgroundColor.html), [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerHeaderStyle/textStyle.html), and [textAlign](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerHeaderStyle/textAlign.html) properties of [DateRangePickerHeaderStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerHeaderStyle-class.html). + +You can customize the header style of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using the [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerHeaderStyle/backgroundColor.html), [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerHeaderStyle/textStyle.html), and [textAlign](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerHeaderStyle/textAlign.html) properties of [DateRangePickerHeaderStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerHeaderStyle-class.html). {% 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( + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + headerStyle: DateRangePickerHeaderStyle( backgroundColor: Color(0xFF7fcd91), textAlign: TextAlign.center, textStyle: TextStyle( @@ -50,10 +53,11 @@ Widget build(BuildContext context) { fontSize: 25, letterSpacing: 5, color: Color(0xFFff5eaea), - )), - ), - ); -} + ), + ), + ), + ); + } {% endhighlight %} {% endtabs %} @@ -61,24 +65,27 @@ Widget build(BuildContext context) { ![Header appearance Date Range Picker](images/headers/headerappearance.png) ## View header -You can customize the view header of the `DateRangePicker` using the [viewHeaderHeight](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/viewHeaderHeight.html) and [viewHeaderStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/viewHeaderStyle.html) properties of [DateRangePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings-class.html). + +You can customize the view header of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) using the [viewHeaderHeight](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/viewHeaderHeight.html) and [viewHeaderStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/viewHeaderStyle.html) properties of [DateRangePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings-class.html). ### Customize view header height -You can customize the view header height of `DateRangePicker` using the `viewHeaderHeight` property of `DateRangePickerMonthViewSettings`. + +You can customize the view header height of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) using the [viewHeaderHeight](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/viewHeaderHeight.html) property of [DateRangePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings-class.html). {% tabs %} {% highlight dart hl_lines="6 7" %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - monthViewSettings: - DateRangePickerMonthViewSettings(viewHeaderHeight: 100), - ), - ); -} + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + monthViewSettings: DateRangePickerMonthViewSettings( + viewHeaderHeight: 100, + ), + ), + ); + } {% endhighlight %} {% endtabs %} @@ -86,23 +93,26 @@ Widget build(BuildContext context) { ![View Header height Date Range Picker](images/headers/viewheaderheight.png) ### View header appearance -You can customize the view header style of `DateRangePicker` by using the [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerViewHeaderStyle/backgroundColor.html), [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerViewHeaderStyle/textStyle.html) properties of [DateRangePickerViewHeaderStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerViewHeaderStyle-class.html). + +You can customize the view header style of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using the [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerViewHeaderStyle/backgroundColor.html), [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerViewHeaderStyle/textStyle.html) properties of [DateRangePickerViewHeaderStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerViewHeaderStyle-class.html). {% tabs %} {% highlight dart hl_lines="7 8 9" %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - monthViewSettings: DateRangePickerMonthViewSettings( + @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))), - ), - ); -} + backgroundColor: Color(0xFF7fcd91), + textStyle: TextStyle(fontSize: 20, letterSpacing: 5), + ), + ), + ), + ); + } {% endhighlight %} {% endtabs %} @@ -110,19 +120,21 @@ Widget build(BuildContext context) { ![View Header appearance Date Range Picker](images/headers/viewheaderappearance.png) ### View header day format -You can customize the view header of `DateRangePicker` by using the [dayFormat](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/dayFormat.html) property of [DateRangePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings-class.html). + +You can customize the view header of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) by using the [dayFormat](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/dayFormat.html) property of [DateRangePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings-class.html). {% tabs %} {% highlight dart hl_lines="6" %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfDateRangePicker( view: DateRangePickerView.month, - monthViewSettings: DateRangePickerMonthViewSettings(dayFormat: 'EEE')), - ); -} + monthViewSettings: DateRangePickerMonthViewSettings(dayFormat: 'EEE'), + ), + ); + } {% endhighlight %} {% endtabs %} @@ -135,4 +147,4 @@ Widget build(BuildContext context) { * [How to restrict the year view navigation while tapping header of the Flutter date range picker (SfDateRangePicker)](https://support.syncfusion.com/kb/article/10509/how-to-restrict-the-year-view-navigation-while-tapping-header-of-the-flutter-date-range) * [How to customize the header in Flutter multi date range picker (SfDateRangePicker)?](https://support.syncfusion.com/kb/article/10373/how-to-customize-the-header-in-the-flutter-multi-date-range-picker-sfdaterangepicker) * [How to style a header in the Flutter date range picker (SfDateRangePicker)](https://support.syncfusion.com/kb/article/10831/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)](https://support.syncfusion.com/kb/article/10731/how-to-select-all-days-when-clicking-on-the-day-header-in-the-flutter-date-range-picker) \ No newline at end of file +* [How to select all days when clicking on the day header in the Flutter date range picker (SfDateRangePicker)](https://support.syncfusion.com/kb/article/10731/how-to-select-all-days-when-clicking-on-the-day-header-in-the-flutter-date-range-picker) diff --git a/Flutter/DateRangePicker/hijri-date-picker.md b/Flutter/DateRangePicker/hijri-date-picker.md index 1565a5ac8..55bc066f3 100644 --- a/Flutter/DateRangePicker/hijri-date-picker.md +++ b/Flutter/DateRangePicker/hijri-date-picker.md @@ -8,6 +8,7 @@ documentation: ug --- # Flutter Hijri Date Range Picker (SfHijriDateRangePicker) Overview + Along with the Gregorian calendar, the picker package contains a Hijri date picker to display the Islamic calendar. Islamic calendar or Hijri calendar is a lunar calendar consisting of 12 months in a year of 354 or 355 days. To know more about the Islamic calendar, kindly refer to [Wikipedia](https://en.wikipedia.org/wiki/Islamic_calendar). It consists of all the Gregorian calendar functionalities like min and max date, the first day of the week, different selection modes, RTL, and customization for special dates. @@ -17,12 +18,14 @@ To display the Hijri date picker, initialize the [HijriDateRangePicker](https:// {% tabs %} {% highlight dart hl_lines="4" %} -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold(body: SfHijriDateRangePicker()), - ); -} + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfHijriDateRangePicker() + ) + ); + } {% endhighlight %} {% endtabs %} @@ -31,23 +34,23 @@ Widget build(BuildContext context) { >**NOTE** * Most of the properties type and classes were same from [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) except the followings [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html), [HijriDatePickerMonthCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle-class.html), [HijriDatePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthViewSettings-class.html), [HijriDatePickerViewChangedArgs](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerViewChangedArgs-class.html), [HijriDatePickerYearCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerYearCellStyle-class.html), [HijriDateRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDateRange-class.html) and [HijriDatePickerView](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerView.html). -* Use the [HijriDateTime](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/HijriDateTime-class.html) class to define the date for `SfHijriDateRangePicker`. +* Use the [HijriDateTime](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/HijriDateTime-class.html) class to define the date for [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html). ## Multiple picker views -The `SfHijriDateRangePicker` widget provides three 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/SfHijriDateRangePicker/view.html) property. The default view of the widget is the month view. By default, the current date will be displayed initially for all the date range picker views. + +The [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html) widget provides three 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/SfHijriDateRangePicker/view.html) property. The default view of the widget is the month view. By default, the current date will be displayed initially for all the date range picker views. {% tabs %} {% highlight dart hl_lines="6" %} -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: SfHijriDateRangePicker( - view: HijriDatePickerView.year, - )), - ); -} + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfHijriDateRangePicker(view: HijriDatePickerView.year), + ), + ); + } {% endhighlight %} {% endtabs %} @@ -55,21 +58,25 @@ Widget build(BuildContext context) { ![Hijri multiple picker views](images/hijri-picker/hijri_picker_views.png) ## Change first day of week -The `SfHijriDateRangePicker` widget will be rendered with Sunday as the first day of the week but you can customize it to any day by using the [firstDayOfWeek](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthViewSettings/firstDayOfWeek.html) property [HijriDatePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthViewSettings-class.html). + +The [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html) widget will be rendered with Sunday as the first day of the week but you can customize it to any day by using the [firstDayOfWeek](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthViewSettings/firstDayOfWeek.html) property [HijriDatePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthViewSettings-class.html). {% tabs %} {% highlight dart hl_lines="7" %} -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( body: SfHijriDateRangePicker( - view: HijriDatePickerView.month, - monthViewSettings: HijriDatePickerMonthViewSettings(firstDayOfWeek: 1), - )), - ); -} + view: HijriDatePickerView.month, + monthViewSettings: HijriDatePickerMonthViewSettings( + firstDayOfWeek: 1, + ), + ), + ), + ); + } {% endhighlight %} {% endtabs %} @@ -77,22 +84,24 @@ Widget build(BuildContext context) { ![Hijri first day of week](images/hijri-picker/hijri_first_day_of_week.png) ## Week number -Display the Week number of the year in the month view by setting the [showWeekNumber](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthViewSettings/showWeekNumber.html) property of the `HijriDatePickerMonthViewSettings` as true, and by default it is false. The Week numbers will be displayed based on the ISO standard. + +Display the Week number of the year in the month view by setting the [showWeekNumber](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthViewSettings/showWeekNumber.html) property of the [HijriDatePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthViewSettings-class.html) as true, and by default it is false. The Week numbers will be displayed based on the ISO standard. {% tabs %} {% highlight dart hl_lines="7 8 9" %} -@override + @override Widget build(BuildContext context) { return MaterialApp( - home: Scaffold( - body: SfHijriDateRangePicker( - view: HijriDatePickerView.month, - monthViewSettings: const HijriDatePickerMonthViewSettings( - showWeekNumber: true, + home: Scaffold( + body: SfHijriDateRangePicker( + view: HijriDatePickerView.month, + monthViewSettings: const HijriDatePickerMonthViewSettings( + showWeekNumber: true, + ), ), ), - )); + ); } {% endhighlight %} @@ -101,25 +110,28 @@ Display the Week number of the year in the month view by setting the [showWeekNu ![Hijri Week Number in Flutter Date Range Picker](images/hijri-picker/flutter-hijri-date-range-picker-week-number.png) ## Week number appearance + Customize the Week number style by using the [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerWeekNumberStyle/textStyle.html) and the [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerWeekNumberStyle/backgroundColor.html) properties of the [DateRangePickerWeekNumberStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerWeekNumberStyle-class.html). {% tabs %} {% highlight dart hl_lines="9 10 11" %} -@override + @override Widget build(BuildContext context) { return MaterialApp( - home: Scaffold( - body: SfHijriDateRangePicker( - view: HijriDatePickerView.month, - monthViewSettings: const HijriDatePickerMonthViewSettings( - showWeekNumber: true, - weekNumberStyle: DateRangePickerWeekNumberStyle( + home: Scaffold( + body: SfHijriDateRangePicker( + view: HijriDatePickerView.month, + monthViewSettings: const HijriDatePickerMonthViewSettings( + showWeekNumber: true, + weekNumberStyle: DateRangePickerWeekNumberStyle( textStyle: TextStyle(fontStyle: FontStyle.italic), - backgroundColor: Colors.purple), + backgroundColor: Colors.purple, + ), + ), ), ), - )); + ); } {% endhighlight %} @@ -129,29 +141,30 @@ Customize the Week number style by using the [textStyle](https://pub.dev/documen ## Date selection -The `SfHijriDateRangePicker` supports selecting single, multiple, and range of dates. It also supports the programmatic selection. -The selected date or range details can be obtained using the [onSelectionChanged ](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/onSelectionChanged.html)callback of Hijri 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 [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html) supports selecting single, multiple, and range of dates. It also supports the programmatic selection. + +The selected date or range details can be obtained using the [onSelectionChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/onSelectionChanged.html)callback of Hijri 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="12" %} -void _onSelectionChanged(DateRangePickerSelectionChangedArgs args) { - /// TODO: implement your code here -} + void _onSelectionChanged(DateRangePickerSelectionChangedArgs args) { + /// TODO: implement your code here + } -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( body: SfHijriDateRangePicker( - view: HijriDatePickerView.month, - selectionMode: DateRangePickerSelectionMode.range, - onSelectionChanged: _onSelectionChanged, - )), - ); -} + view: HijriDatePickerView.month, + selectionMode: DateRangePickerSelectionMode.range, + onSelectionChanged: _onSelectionChanged, + )), + ); + } {% endhighlight %} {% endtabs %} @@ -159,6 +172,7 @@ Widget build(BuildContext context) { ![Hijri date selection](images/hijri-picker/hijri_progrmatic_selection_range.png) ## Programmatic date navigation + You can programmatically navigate date in the Hijri date picker widget by using the [displayDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController/displayDate.html) property from [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html). {% tabs %} @@ -191,7 +205,8 @@ class MyAppState extends State { ![Hijri programmatic date navigation](images/hijri-picker/hijri_programattic_date_navigation.png) ## Programmatic view navigation -You can programmatically navigate to any view in the Hijri date picker widget by using the [view](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController/view.html) property of `HijriDatePickerController. + +You can programmatically navigate to any view in the Hijri date picker widget by using the [view](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController/view.html) property of [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html). {% tabs %} {% highlight dart hl_lines="2 6 15" %} @@ -222,12 +237,14 @@ class MyAppState extends State { ![Hijri programmatic view navigation](images/hijri-picker/hijri_programattic_view_navigation.jpg) ## Programmatic date selection -You can select dates programmatically on the Hijri date picker widget by using the `HijriDatePickerController`. + +You can select dates programmatically on the Hijri date picker widget by using the [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html). For selection [refer](https://help.syncfusion.com/flutter/daterangepicker/selections). ### Single selection -You can select the date programmatically by using the [selectedDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedDate.html) property of `HijriDatePickerController`. It is only applicable when the `selectionMode` is set to `DateRangePickerSelectionMode.single`. + +You can select the date programmatically by using the [selectedDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedDate.html) property of [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html). It is only applicable when the [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/selectionMode.html) is set to [DateRangePickerSelectionMode.single](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#single). {% tabs %} {% highlight dart hl_lines="2 7 16 17" %} @@ -246,10 +263,11 @@ class MyAppState extends State { Widget build(BuildContext context) { return MaterialApp( home: Scaffold( - body: SfHijriDateRangePicker( - selectionMode: DateRangePickerSelectionMode.single, - controller: _controller, - )), + body: SfHijriDateRangePicker( + selectionMode: DateRangePickerSelectionMode.single, + controller: _controller, + ), + ), ); } } @@ -260,7 +278,8 @@ class MyAppState extends State { ![Hijri programmatic single selection](images/hijri-picker/hijri_programmatic_selection_single.png) ### Multi selection -You can select the multiple dates programmatically by using the [selectedDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedDates.html) property of `HijriDatePickerController`. It is only applicable when the selectionMode is set to `DateRangePickerSelectionMode.multiple`. + +You can select the multiple dates programmatically by using the [selectedDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedDates.html) property of [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html). It is only applicable when the selectionMode is set to [DateRangePickerSelectionMode.multiple](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiple). {% tabs %} {% highlight dart hl_lines="2 7 8 9 10 11 12 21 22" %} @@ -284,10 +303,11 @@ class MyAppState extends State { Widget build(BuildContext context) { return MaterialApp( home: Scaffold( - body: SfHijriDateRangePicker( - selectionMode: DateRangePickerSelectionMode.multiple, - controller: _controller, - )), + body: SfHijriDateRangePicker( + selectionMode: DateRangePickerSelectionMode.multiple, + controller: _controller, + ), + ), ); } } @@ -298,7 +318,8 @@ class MyAppState extends State { ![Hijri programmatic multi selection](images/hijri-picker/hijri_programmatic_selection_multiple.png) ### Range selection -You can select the single date range programmatically by using the [selectedRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedRange.html) property of `HijriDatePickerController`. It is only applicable when the `selectionMode` is set to `DateRangePickerSelectionMode.range`. + +You can select the single date range programmatically by using the [selectedRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedRange.html) property of [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html). It is only applicable when the [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/selectionMode.html) is set to [DateRangePickerSelectionMode.range](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#range). Use the [HijriDateRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDateRange-class.html) to define the date range for the Hijri date picker. @@ -320,10 +341,11 @@ class MyAppState extends State { Widget build(BuildContext context) { return MaterialApp( home: Scaffold( - body: SfHijriDateRangePicker( - selectionMode: DateRangePickerSelectionMode.range, - controller: _controller, - )), + body: SfHijriDateRangePicker( + selectionMode: DateRangePickerSelectionMode.range, + controller: _controller, + ), + ), ); } } @@ -334,7 +356,8 @@ class MyAppState extends State { ![Hijri programmatic range selection](images/hijri-picker/hijri_progrmatic_selection_range.png) ### Multi-range selection -You can select more than one date range programmatically by using the [selectedRanges](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedRanges.html) property of `HijriDatePickerController`. It is only applicable when the `selectionMode` is set to `DateRangePickerSelectionMode.multiRange`. + +You can select more than one date range programmatically by using the [selectedRanges](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedRanges.html) property of [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html). It is only applicable when the [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/selectionMode.html) is set to [DateRangePickerSelectionMode.multiRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiRange). {% tabs %} {% highlight dart hl_lines="2 7 8 9 10 11 12 21 22" %} @@ -358,10 +381,11 @@ class MyAppState extends State { Widget build(BuildContext context) { return MaterialApp( home: Scaffold( - body: SfHijriDateRangePicker( - selectionMode: DateRangePickerSelectionMode.multiRange, - controller: _controller, - )), + body: SfHijriDateRangePicker( + selectionMode: DateRangePickerSelectionMode.multiRange, + controller: _controller, + ), + ), ); } } @@ -373,7 +397,8 @@ class MyAppState extends State { ![Hijri programmatic multi-range selection](images/hijri-picker/hijri_programmatic_selection_multi_range.png) ### Extendable range selection -Extend the selected range with the new selected date in any date range picker view by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to `extendableRange`. + +Extend the selected range with the new selected date in any date range picker view by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to [extendableRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#extendableRange). {% tabs %} {% highlight dart hl_lines="2 7 8 17 18" %} @@ -392,12 +417,13 @@ class MyAppState extends State { @override Widget build(BuildContext context) { return MaterialApp( - home: Scaffold( - body: SfHijriDateRangePicker( - selectionMode: DateRangePickerSelectionMode.extendableRange, - controller: _controller, + home: Scaffold( + body: SfHijriDateRangePicker( + selectionMode: DateRangePickerSelectionMode.extendableRange, + controller: _controller, + ), ), - )); + ); } } @@ -407,25 +433,28 @@ class MyAppState extends State { ![Hijri Extendable Range Selection in Flutter Date Range Picker](images/hijri-picker/flutter-hijri-date-range-picker-extendable-range-selection.png) >**NOTE** -* The hovering effect which occurs while extending the range will not be displayed when the `DateRangePickerNavigationMode` is set as `DateRangePickerNavigationMode.scroll`. +* The hovering effect which occurs while extending the range will not be displayed when the [DateRangePickerNavigationMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerNavigationMode.html) is set as [DateRangePickerNavigationMode.scroll](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerNavigationMode.html#scroll). ## Extendable range selection Direction -It allows to extend the selection direction by using the [extendableRangeSelectionDirection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/extendableRangeSelectionDirection.html) property of the DateRangePicker. + +It allows to extend the selection direction by using the [extendableRangeSelectionDirection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/extendableRangeSelectionDirection.html) property of the [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html). You can set the extendable range selection direction as forward, backward, both and none. {% tabs %} {% highlight dart hl_lines="8 9" %} -@override + @override Widget build(BuildContext context) { return MaterialApp( - home: Scaffold( - body: SfHijriDateRangePicker( - view: HijriDatePickerView.month, - selectionMode: DateRangePickerSelectionMode.extendableRange, - extendableRangeSelectionDirection: - ExtendableRangeSelectionDirection.forward, - ))); + home: Scaffold( + body: SfHijriDateRangePicker( + view: HijriDatePickerView.month, + selectionMode: DateRangePickerSelectionMode.extendableRange, + extendableRangeSelectionDirection: + ExtendableRangeSelectionDirection.forward, + ), + ), + ); } {% endhighlight %} @@ -437,53 +466,60 @@ You can set the extendable range selection direction as forward, backward, both * If it is set to backward direction, the end date will not be changed here. ## Month cell customization -Customize the Hijri date picker month view by using the [monthCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/monthCellStyle.html) property of `SfHijriDateRangePicker`. -* **Current month dates**: You can customize the current month date’s text style and background of the `SfHijriDateRangePicker` by using the [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/textStyle.html) and [cellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/cellDecoration.html) properties of [HijriDatePickerMonthCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle-class.html). -* **Today date**: You can customize the today date text style and background of the `SfHijriDateRangePicker` by using the [todayTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/todayTextStyle.html) and [todayCellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/todayCellDecoration.html). -* **Blackout Dates**: You can customize the blackout dates text style and background of the `SfHijriDateRangePicker` by using the [blackoutDateTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/blackoutDateTextStyle.html) and [blackoutDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/blackoutDatesDecoration.html). -* **Disabled dates**: Disable the dates text style and background beyond of the [minDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/minDate.html) and [maxDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/maxDate.html) in `SfHijriDateRangePicker` by using the [disableDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/disabledDatesTextStyle.html) and [disableDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/disabledDatesDecoration.html). -* **Special Dates**: You can add special dates to the `SfHijriDateRangePicker` by using the [specialDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthViewSettings/specialDates.html) property, and you can also customize the special dates text style and background by using the [specialDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/specialDatesTextStyle.html) and [specialDatesDecoration](). -* **Weekend Dates**: You can change the weekend dates to `SfHijriDateRangePicker` by using the [weekendDays](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthViewSettings/weekendDays.html) property, and you can also customize the weekend dates text style and background by using the [weekendDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/weekendTextStyle.html) and [weekendDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/weekendDatesDecoration.html). +Customize the Hijri date picker month view by using the [monthCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/monthCellStyle.html) property of [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html). + +* **Current month dates**: You can customize the current month date’s text style and background of the [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html) by using the [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/textStyle.html) and [cellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/cellDecoration.html) properties of [HijriDatePickerMonthCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle-class.html). +* **Today date**: You can customize the today date text style and background of the [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html) by using the [todayTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/todayTextStyle.html) and [todayCellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/todayCellDecoration.html). +* **Blackout Dates**: You can customize the blackout dates text style and background of the [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html) by using the [blackoutDateTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/blackoutDateTextStyle.html) and [blackoutDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/blackoutDatesDecoration.html). +* **Disabled dates**: Disable the dates text style and background beyond of the [minDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/minDate.html) and [maxDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/maxDate.html) in [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html) by using the [disableDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/disabledDatesTextStyle.html) and [disableDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/disabledDatesDecoration.html). +* **Special Dates**: You can add special dates to the [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html) by using the [specialDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthViewSettings/specialDates.html) property, and you can also customize the special dates text style and background by using the [specialDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/specialDatesTextStyle.html) and [specialDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/specialDatesDecoration.html). +* **Weekend Dates**: You can change the weekend dates to [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html) by using the [weekendDays](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthViewSettings/weekendDays.html) property, and you can also customize the weekend dates text style and background by using the [weekendDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/weekendTextStyle.html) and [weekendDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/weekendDatesDecoration.html). {% tabs %} {% highlight dart hl_lines="15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31" %} -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( body: SfHijriDateRangePicker( - view: HijriDatePickerView.month, - monthViewSettings: HijriDatePickerMonthViewSettings( - blackoutDates: [HijriDateTime(1442, 02, 05)], - weekendDays: [6, 7], - specialDates: [ - HijriDateTime(1442, 02, 10), - HijriDateTime(1442, 02, 15) - ], - ), - monthCellStyle: HijriDatePickerMonthCellStyle( - 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), + view: HijriDatePickerView.month, + monthViewSettings: HijriDatePickerMonthViewSettings( + blackoutDates: [HijriDateTime(1442, 02, 05)], + weekendDays: [6, 7], + specialDates: [ + HijriDateTime(1442, 02, 10), + HijriDateTime(1442, 02, 15), + ], + ), + monthCellStyle: HijriDatePickerMonthCellStyle( + 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), + ), + ), ), - )), - ); -} + ); + } {% endhighlight %} {% endtabs %} @@ -491,38 +527,42 @@ Widget build(BuildContext context) { ![Hijri month cell customization](images/hijri-picker/hijri_month_customization.png) ## Year cell customization -You can customize the calendar year, and decade view by using the [yearCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/yearCellStyle.html) of `SfHijriDateRangePicker`. -* **Current year**: You can customize the current month dates text style and background of the `SfHijriDateRangePicker` by using the [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerYearCellStyle/textStyle.html) and [cellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerYearCellStyle/cellDecoration.html) properties of [HijriDatePickerYearCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerYearCellStyle-class.html). -* **Disabled dates**: Disable the dates text style and background of the `SfHijriDateRangePicker` by using the [disableDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerYearCellStyle/disabledDatesTextStyle.html) and [disableDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerYearCellStyle/disabledDatesDecoration.html). -* **Today date**: You can customize the today date text style and background of the `SfHijriDateRangePicker` by using the [todayTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerYearCellStyle/todayTextStyle.html) and [todayCellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerYearCellStyle/todayCellDecoration.html). +You can customize the calendar year, and decade view by using the [yearCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/yearCellStyle.html) of [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html). + +* **Current year**: You can customize the current month dates text style and background of the [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html) by using the [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerYearCellStyle/textStyle.html) and [cellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerYearCellStyle/cellDecoration.html) properties of [HijriDatePickerYearCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerYearCellStyle-class.html). +* **Disabled dates**: Disable the dates text style and background of the [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html) by using the [disableDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerYearCellStyle/disabledDatesTextStyle.html) and [disableDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerYearCellStyle/disabledDatesDecoration.html). +* **Today date**: You can customize the today date text style and background of the [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html) by using the [todayTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerYearCellStyle/todayTextStyle.html) and [todayCellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerYearCellStyle/todayCellDecoration.html). {% tabs %} {% highlight dart hl_lines="7 8 9 10 11 12 13 14 15 16 17 18 19" %} -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( body: SfHijriDateRangePicker( - view: HijriDatePickerView.year, - yearCellStyle: HijriDatePickerYearCellStyle( - disabledDatesDecoration: BoxDecoration( - color: const Color(0xFFDFDFDF), - border: Border.all(color: const Color(0xFFB6B6B6), width: 1), - shape: BoxShape.circle), - disabledDatesTextStyle: const TextStyle(color: Colors.black), - textStyle: const TextStyle(color: Colors.blue), - todayCellDecoration: BoxDecoration( - color: const Color(0xFFDFDFDF), - border: Border.all(color: const Color(0xFFB6B6B6), width: 1), - shape: BoxShape.circle), - todayTextStyle: const TextStyle(color: Colors.purple), + view: HijriDatePickerView.year, + yearCellStyle: HijriDatePickerYearCellStyle( + disabledDatesDecoration: BoxDecoration( + color: const Color(0xFFDFDFDF), + border: Border.all(color: const Color(0xFFB6B6B6), width: 1), + shape: BoxShape.circle, + ), + disabledDatesTextStyle: const TextStyle(color: Colors.black), + textStyle: const TextStyle(color: Colors.blue), + todayCellDecoration: BoxDecoration( + color: const Color(0xFFDFDFDF), + border: Border.all(color: const Color(0xFFB6B6B6), width: 1), + shape: BoxShape.circle, + ), + todayTextStyle: const TextStyle(color: Colors.purple), + ), + ), ), - )), - ); -} + ); + } {% endhighlight %} {% endtabs %} diff --git a/Flutter/DateRangePicker/localization.md b/Flutter/DateRangePicker/localization.md index dde3adf14..07c0c3efa 100644 --- a/Flutter/DateRangePicker/localization.md +++ b/Flutter/DateRangePicker/localization.md @@ -9,7 +9,7 @@ documentation: ug # Localization in Flutter Date Range Picker (SfDateRangePicker) -By default, the calendar widget supports US English localizations. You can change other languages by specifying the `MaterialApp` properties and adding the `flutter_localizations` package to your application. +By default, the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) widget supports US English localizations. You can change other languages by specifying the [MaterialApp](https://api.flutter.dev/flutter/material/MaterialApp-class.html) properties and adding the `flutter_localizations` package to your application. To use `flutter_localizations`, add the package as a dependency to your `pubspec.yaml` file. @@ -21,37 +21,33 @@ flutter_localizations: {% endhighlight %} -Next, import the `flutter_localizations` library and specify `localizationsDelegates` and `supportedLocale` for `MaterialApp`. +Next, import the `flutter_localizations` library and specify [localizationsDelegates](https://api.flutter.dev/flutter/material/MaterialApp/localizationsDelegates.html) and [supportedLocale](https://api.flutter.dev/flutter/material/MaterialApp/supportedLocales.html) for [MaterialApp](https://api.flutter.dev/flutter/material/MaterialApp-class.html). {% tabs %} {% highlight dart hl_lines="6 7 8 9 10 11 12 13 14 15" %} -import 'package:flutter_localizations/flutter_localizations.dart'; + import 'package:flutter_localizations/flutter_localizations.dart'; -@override -Widget build(BuildContext context) { -return MaterialApp( - localizationsDelegates: [ - GlobalMaterialLocalizations.delegate, - GlobalWidgetsLocalizations.delegate, + @override + Widget build(BuildContext context) { + return MaterialApp( + localizationsDelegates: [ + GlobalMaterialLocalizations.delegate, + GlobalWidgetsLocalizations.delegate, ], - supportedLocales: [ - const Locale('zh'), - const Locale('ar'), - const Locale('ja'), + supportedLocales: [ + const Locale('zh'), + const Locale('ar'), + const Locale('ja'), ], locale: const Locale('zh'), title: 'DateRangePicker Localization', home: Scaffold( - appBar: AppBar( - title: Text('Calendar'), - ), - body: SfDateRangePicker( - view: DateRangePickerView.month, - ), - ), - ); -} + appBar: AppBar(title: Text('Calendar')), + body: SfDateRangePicker(view: DateRangePickerView.month), + ), + ); + } {% endhighlight %} {% endtabs %} diff --git a/Flutter/DateRangePicker/right-to-left.md b/Flutter/DateRangePicker/right-to-left.md index 566c9a9ac..6d341aac4 100644 --- a/Flutter/DateRangePicker/right-to-left.md +++ b/Flutter/DateRangePicker/right-to-left.md @@ -8,31 +8,30 @@ documentation: ug --- # Right to Left (RTL) in Flutter Date Range Picker (SfDateRangePicker) -`SfDateRangePicker` supports Right to left rendering and all the date picker elements rendering direction will be changed. + +[SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) supports Right to left rendering and all the date picker elements rendering direction will be changed. ## RTL rendering ways + Right to left rendering can be switched in the following ways: ### Wrapping the SfDateRangePicker with Directionality widget -The `SfDateRangePicker` supports changing the layout direction of the widget in the right-to-left direction by using the `Directionality` widget and setting the `textDirection` property as [TextDirection.rtl](https://api.flutter.dev/flutter/dart-ui/TextDirection.html). + +The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) supports changing the layout direction of the widget in the right-to-left direction by using the [Directionality](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and setting the [textDirection](https://api.flutter.dev/flutter/dart-ui/TextDirection.html) property as [TextDirection.rtl](https://api.flutter.dev/flutter/dart-ui/TextDirection.html#rtl). {% tabs %} {% highlight dart hl_lines="7 8" %} -@override -Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - title: Text('Right to Left'), - ), - body: Directionality( - textDirection: TextDirection.rtl, - child: SfDateRangePicker( - view: DateRangePickerView.month, + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar(title: Text('Right to Left')), + body: Directionality( + textDirection: TextDirection.rtl, + child: SfDateRangePicker(view: DateRangePickerView.month), ), - ), - ); -} + ); + } {% endhighlight %} {% endtabs %} @@ -40,14 +39,15 @@ Widget build(BuildContext context) { ![RTL Date Range Picker](images/rtl/right_to_left.png) ### Changing the locale to RTL languages + To change the date range picker rendering direction from right to left, change the locale to any of the RTL languages such as Arabic, Persian, Hebrew, Pashto, and Urdu. {% tabs %} {% highlight dart hl_lines="4 5 6 7 8 9 10 11 12 13" %} -@override -Widget build(BuildContext context) { - return MaterialApp( + @override + Widget build(BuildContext context) { + return MaterialApp( localizationsDelegates: [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, @@ -60,35 +60,32 @@ Widget build(BuildContext context) { locale: Locale('ar'), home: Scaffold( body: SfDateRangePicker( - //... - ), - )); -} + //... + ), + ), + ); + } {% endhighlight %} {% endtabs %} ## RTL supported date range picker elements -Right to left rendering is supported for all the elements in the `SfDateRangePicker`. + +Right to left rendering is supported for all the elements in the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). {% tabs %} {% highlight dart hl_lines="7 8" %} -@override -Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - title: Text('Right to Left'), - ), - body: Directionality( - textDirection: TextDirection.rtl, - child: SfDateRangePicker( - view: DateRangePickerView.month, + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar(title: Text('Right to Left')), + body: Directionality( + textDirection: TextDirection.rtl, + child: SfDateRangePicker(view: DateRangePickerView.month), ), - ), - ); -} + ); + } - {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/Flutter/DateRangePicker/selections.md b/Flutter/DateRangePicker/selections.md index b6c4264b7..b4eb8d6b7 100644 --- a/Flutter/DateRangePicker/selections.md +++ b/Flutter/DateRangePicker/selections.md @@ -8,25 +8,27 @@ documentation: ug --- # Selections in Flutter Date Range Picker (SfDateRangePicker) -Dates can be selected by touching the month view cells. The default [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionMode.html) is Single that allows the user to select one date at a time. `SfDateRangePicker` provides support to select dates in four modes such as `Single`, `Multiple`, `Range` and `MultiRange` selection + +Dates can be selected by touching the month view cells. The default [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionMode.html) is Single that allows the user to select one date at a time. [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) provides support to select dates in five modes such as [Single](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#single), [Multiple](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiple), [Range](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#range) [MultiRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiRange) and [ExtendableRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#extendableRange) selection >**NOTE** When the `enableViewNavigation` property is set to false, the Date range picker allows you to select the cells in the year, decade, and century views of date range picker. ## Single selection - A `single` date range picker cell can be selected in a date range picker view by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to `single`. + + A [single](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#single) date range picker cell can be selected in a date range picker view by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to [single](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#single). {% tabs %} {% highlight dart hl_lines="6" %} -@override -Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - selectionMode: DateRangePickerSelectionMode.single, - ) - ); -} + body: SfDateRangePicker( + view: DateRangePickerView.month, + selectionMode: DateRangePickerSelectionMode.single, + ), + ); + } {% endhighlight %} {% endtabs %} @@ -36,27 +38,27 @@ Widget build(BuildContext context) { >**NOTE** * The year, decade, and century view allow you to select cells only when the `enableViewNavigation` is set to false. * In this scenario, the `selection changed` callback will return the first date of the month, year, or decade of the selected cell when the selection mode set to `single` and `multiple`. -Eg: * In the year view, when the May month cell is selected then the selected date value will be 01-05-2020. * In the decade view, when the (2025) year cell is selected then the selected date value will be 01-01-2025. * In the century view, when the (2020-2029) decade cell is selected then the selected date value will be 01-01-2020. ## Multiple selection -You can randomly select more than one date range picker cell by setting the `DateRangePickerSelectionMode` to `multiple`. By clicking again you can deselect the selected cells. + +You can randomly select more than one date range picker cell by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to [multiple](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiple). By clicking again you can deselect the selected cells. {% tabs %} {% highlight dart hl_lines="6" %} -@override -Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - selectionMode: DateRangePickerSelectionMode.multiple, - ) - ); -} + body: SfDateRangePicker( + view: DateRangePickerView.month, + selectionMode: DateRangePickerSelectionMode.multiple, + ), + ); + } {% endhighlight %} {% endtabs %} @@ -64,20 +66,21 @@ Widget build(BuildContext context) { ![MultiSelection Date Range Picker](images/selections/multiselection.png) ## Range selection -You can select a range of cells in any date range picker view by setting the `DateRangePickerSelectionMode` to the `range`. + +You can select a range of cells in any date range picker view by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to the [range](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#range). {% tabs %} {% highlight dart hl_lines="6" %} -@override -Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - selectionMode: DateRangePickerSelectionMode.range, - ) - ); -} + body: SfDateRangePicker( + view: DateRangePickerView.month, + selectionMode: DateRangePickerSelectionMode.range, + ), + ); + } {% endhighlight %} {% endtabs %} @@ -86,28 +89,28 @@ Widget build(BuildContext context) { >**NOTE** * The year, decade, and century view allow you to select cells only when the `enableViewNavigation` set is as false. -* In this scenario, the `selection changed` callback will return the first and last date of the month, year, or decade of the selected cell when the selection mode is set to `range` and `multi-range`. -Eg: +* In this scenario, the `selection changed` callback will return the first and last date of the month, year, or decade of the selected cell when the selection mode is set to `range` and `multi-range`. * In the year view, when the range is selected as May – June, then the range value will be 01-05-2020 to 30-06-2020. * In the decade view, when the range is selected as 2025 – 2030, then the range value will be 01-01-2025 to 31-12-2030. * In the century view, when the range is selected as 2020-2029 to 2030-2039, then the range value will be 01-01-2020 to 31-12-2039. ## Multi range selection -You can select more than one range of cells in any of the date range picker views by setting the `DateRangePickerSelectionMode` to the `multiRange`. + +You can select more than one range of cells in any of the date range picker views by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to the [multiRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiRange). {% tabs %} {% highlight dart hl_lines="6" %} -@override -Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - selectionMode: DateRangePickerSelectionMode.multiRange, - ) - ); -} + body: SfDateRangePicker( + view: DateRangePickerView.month, + selectionMode: DateRangePickerSelectionMode.multiRange, + ), + ); + } {% endhighlight %} {% endtabs %} @@ -115,20 +118,22 @@ Widget build(BuildContext context) { ![MultiRangeSelection Date Range Picker](images/selections/multirange.png) ## Extendable range selection -Extend the selected range with the new selected date in any date range picker view by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to `extendableRange`. + +Extend the selected range with the new selected date in any date range picker view by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to [extendableRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#extendableRange). {% tabs %} {% highlight dart hl_lines="7" %} -@override + @override Widget build(BuildContext context) { return MaterialApp( - home: Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - selectionMode: DateRangePickerSelectionMode.extendableRange, + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + selectionMode: DateRangePickerSelectionMode.extendableRange, + ), ), - )); + ); } {% endhighlight %} @@ -140,23 +145,25 @@ Extend the selected range with the new selected date in any date range picker vi * The hovering effect which occurs while extending the range will not be displayed when the `DateRangePickerNavigationMode` is set as `DateRangePickerNavigationMode.scroll`. ## Extendable range selection Direction + It allows to extend the selection direction by using the [extendableRangeSelectionDirection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/extendableRangeSelectionDirection.html) property of the DateRangePicker. You can set the extendable range selection direction as forward, backward, both and none. {% tabs %} {% highlight dart hl_lines="8 9" %} -@override + @override Widget build(BuildContext context) { return MaterialApp( - home: Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - selectionMode: DateRangePickerSelectionMode.extendableRange, - extendableRangeSelectionDirection: - ExtendableRangeSelectionDirection.forward, + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + selectionMode: DateRangePickerSelectionMode.extendableRange, + extendableRangeSelectionDirection: + ExtendableRangeSelectionDirection.forward, + ), ), - )); + ); } {% endhighlight %} @@ -168,20 +175,21 @@ You can set the extendable range selection direction as forward, backward, both * If it is set to backward direction, the end date will not be changed here. ## Selection radius -Customize the radius of the selection using the [selectionRadius](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionRadius.html) property of the `SfDateRangePicker`. + +Customize the radius of the selection using the [selectionRadius](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionRadius.html) property of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). {% tabs %} {% highlight dart hl_lines="6" %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - selectionRadius: 10, - ), - ); -} + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + selectionRadius: 10, + ), + ); + } {% endhighlight %} {% endtabs %} @@ -189,20 +197,21 @@ Widget build(BuildContext context) { ![Selection radius Date Range Picker](images/selections/selectionradius.png) ## Selection shape -You can customize the selection shape of the selected date using the [selectionShape](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionShape.html) property of the `DateRangePicker`. + +You can customize the selection shape of the selected date using the [selectionShape](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionShape.html) property of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). {% tabs %} {% highlight dart hl_lines="6" %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - selectionShape: DateRangePickerSelectionShape.rectangle, - ), - ); -} + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + selectionShape: DateRangePickerSelectionShape.rectangle, + ), + ); + } {% endhighlight %} {% endtabs %} @@ -210,41 +219,44 @@ Widget build(BuildContext context) { ![Selection shape Date Range Picker](images/selections/selectionshape.png) ## Enable swipe selection -Using the [enableSwipeSelection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/enableSwipeSelection.html) property of the `DateRangePicker`, you can select the dates by using swiping. By default, `enableSwipeSelection` property is set to `true`. + +Using the [enableSwipeSelection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/enableSwipeSelection.html) property of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html), you can select the dates by using swiping. By default, [enableSwipeSelection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/enableSwipeSelection.html) property is set to `true`. {% tabs %} {% highlight dart hl_lines="7 8" %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - selectionMode: DateRangePickerSelectionMode.range, - monthViewSettings: - DateRangePickerMonthViewSettings(enableSwipeSelection: false), - ), - ); -} + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + selectionMode: DateRangePickerSelectionMode.range, + monthViewSettings: DateRangePickerMonthViewSettings( + enableSwipeSelection: false, + ), + ), + ); + } {% endhighlight %} {% endtabs %} ## Toggle day selection -You can deselect the selected date using the [toggleDaySelection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/toggleDaySelection.html) property of the `SfDateRangePicker`. + +You can deselect the selected date using the [toggleDaySelection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/toggleDaySelection.html) property of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). {% tabs %} {% highlight dart hl_lines="6" %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - toggleDaySelection: true, - ), - ); -} + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + toggleDaySelection: true, + ), + ); + } {% endhighlight %} {% endtabs %} @@ -258,4 +270,4 @@ Widget build(BuildContext context) { * [How to change the selection shape in Flutter date range picker (SfDateRangePicker)?](https://support.syncfusion.com/kb/article/10345/how-to-change-the-selection-shape-in-the-flutter-date-range-picker-sfdaterangepicker) * [How to deselect the selected date in the Flutter date range picker (SfDateRangePicker)](https://support.syncfusion.com/kb/article/10618/how-to-deselect-the-selected-date-in-the-flutter-date-range-picker-sfdaterangepicker) * [How to select previous or next dates based on the selected date in the Flutter date range picker (SfDateRangePicker)](https://support.syncfusion.com/kb/article/10727/how-to-select-previous-or-next-dates-based-on-the-selected-date-in-the-flutter-date-range) -* [How to select all days when clicking on the day header in the Flutter date range picker (SfDateRangePicker)](https://support.syncfusion.com/kb/article/10731/how-to-select-all-days-when-clicking-on-the-day-header-in-the-flutter-date-range-picker) \ No newline at end of file +* [How to select all days when clicking on the day header in the Flutter date range picker (SfDateRangePicker)](https://support.syncfusion.com/kb/article/10731/how-to-select-all-days-when-clicking-on-the-day-header-in-the-flutter-date-range-picker) diff --git a/Flutter/DateRangePicker/views.md b/Flutter/DateRangePicker/views.md index 436064f0c..f60766970 100644 --- a/Flutter/DateRangePicker/views.md +++ b/Flutter/DateRangePicker/views.md @@ -8,22 +8,24 @@ documentation: ug --- # Multiple Picker Views in Flutter Date Range Picker (SfDateRangePicker) -The `SfDateRangePicker` 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. ## Month view + This view displays the entire dates of a particular month. By default, the current month will be displayed on loading. The current date is provided with a separate color different from the rest of the dates color in `month view`. {% tabs %} {% highlight dart hl_lines="5" %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - ) - ); -} + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month + ) + ); + } {% endhighlight %} {% endtabs %} @@ -33,21 +35,22 @@ Widget build(BuildContext context) { #### Week number -Display the Week number of the year in the MonthView by setting the [showWeekNumber](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/showWeekNumber.html) property of the `DateRangePickerMonthViewSettings` as true, and by default it is false. Week numbers will be displayed based on the ISO standard. +Display the Week number of the year in the MonthView by setting the [showWeekNumber](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/showWeekNumber.html) property of the [DateRangePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings-class.html) as true, and by default it is false. Week numbers will be displayed based on the ISO standard. {% tabs %} {% highlight dart hl_lines="7 8 9" %} -@override + @override Widget build(BuildContext context) { return MaterialApp( - home: Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - monthViewSettings: const DateRangePickerMonthViewSettings( - showWeekNumber: true, + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + monthViewSettings: const DateRangePickerMonthViewSettings( + showWeekNumber: true, + ), ), ), - )); + ); } {% endhighlight %} @@ -56,25 +59,28 @@ Display the Week number of the year in the MonthView by setting the [showWeekNum ![Week Number in Flutter Date Range Picker](images\views\flutter-date-range-picker-week-number.png) #### Week number appearance + Customize the Week number style by using the [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerWeekNumberStyle/textStyle.html) and the [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerWeekNumberStyle/backgroundColor.html) properties of the [DateRangePickerWeekNumberStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerWeekNumberStyle-class.html). {% tabs %} {% highlight dart hl_lines="8 9 10 11" %} -@override + @override Widget build(BuildContext context) { return MaterialApp( - home: Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.month, - monthViewSettings: const DateRangePickerMonthViewSettings( - showWeekNumber: true, - weekNumberStyle: DateRangePickerWeekNumberStyle( + home: Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.month, + monthViewSettings: const DateRangePickerMonthViewSettings( + showWeekNumber: true, + weekNumberStyle: DateRangePickerWeekNumberStyle( textStyle: TextStyle(fontStyle: FontStyle.italic), - backgroundColor: Colors.purple), + backgroundColor: Colors.purple, + ), + ), ), ), - )); + ); } {% endhighlight %} @@ -84,19 +90,20 @@ Customize the Week number style by using the [textStyle](https://pub.dev/documen ## Year view + This displays the entire month of a particular year. By default, the current year will be displayed on loading. Navigate between the months quickly by selecting the particular month in a `year view`. {% tabs %} {% highlight dart hl_lines="5" %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.year, - ) - ); -} + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfDateRangePicker( + view: DateRangePickerView.year + ) + ); + } {% endhighlight %} {% endtabs %} @@ -104,19 +111,20 @@ Widget build(BuildContext context) { ![Year view Date Range Picker](images/views/yearview.png) ## Decade view + This view displays the period of 10 years. By default, the current year range of 10 years will be displayed on loading. You can easily navigate between month/year view to decade view by tapping the calendar header. The year can be navigated quickly by selecting a particular year from a `decade view`. {% tabs %} {% highlight dart hl_lines="5" %} -@override -Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.decade, - ) - ); -} + body: SfDateRangePicker( + view: DateRangePickerView.decade + ) + ); + } {% endhighlight %} {% endtabs %} @@ -124,19 +132,20 @@ Widget build(BuildContext context) { ![Decade view Date Range Picker](images/views/decadeview.png) ## Century view + This view displays the period of 100 years. By default, the current year range of 100 years will be displayed on loading. You can easily navigate between month/year/decade view to century view by tapping the calendar header. You can easily navigate to a decade view by selecting decade years in `century view`. {% tabs %} {% highlight dart hl_lines="5" %} -@override -Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return Scaffold( - body: SfDateRangePicker( - view: DateRangePickerView.century, - ) - ); -} + body: SfDateRangePicker( + view: DateRangePickerView.century + ) + ); + } {% endhighlight %} {% endtabs %} @@ -144,20 +153,23 @@ Widget build(BuildContext context) { ![Century view Date Range Picker](images/views/centuryview.png) ## Week view + The number of weeks in the month view can be customized by setting the [numberOfWeeksInView](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/numberOfWeeksInView.html) property of [DateRangePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings-class.html). {% tabs %} {% highlight dart hl_lines="6 7" %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfDateRangePicker( + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfDateRangePicker( view: DateRangePickerView.month, - monthViewSettings: - DateRangePickerMonthViewSettings(numberOfWeeksInView: 2)), - ); -} + monthViewSettings: DateRangePickerMonthViewSettings( + numberOfWeeksInView: 2, + ), + ), + ); + } {% endhighlight %} {% endtabs %} @@ -165,24 +177,26 @@ Widget build(BuildContext context) { ![Century view Date Range Picker](images/views/numberofweek-in-view.png) ## Multi-date picker view -You can enable a multi-date range picker by using the [enableMultiView](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/enableMultiView.html) property of `SfDateRangePicker`, which displays two date range pickers side by side, the space between the two date-range picker can be customized by using the [viewSpacing](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/viewSpacing.html) property of `SfDateRangePicker`. + +You can enable a multi-date range picker by using the [enableMultiView](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/enableMultiView.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html), which displays two date range pickers side by side, the space between the two date-range picker can be customized by using the [viewSpacing](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/viewSpacing.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). {% tabs %} {% highlight dart hl_lines="6" %} -@override + @override Widget build(BuildContext context) { return MaterialApp( - home: Scaffold( - body: SfDateRangePicker( - enableMultiView: true, - viewSpacing: 20, - headerStyle: DateRangePickerHeaderStyle( - textAlign: TextAlign.center - ), - )); + home: Scaffold( + body: SfDateRangePicker( + enableMultiView: true, + viewSpacing: 20, + headerStyle: DateRangePickerHeaderStyle( + textAlign: TextAlign.center + ), + ), + ), + ); } -} {% endhighlight %} {% endtabs %} @@ -190,22 +204,24 @@ You can enable a multi-date range picker by using the [enableMultiView](https:// ![Multi-date picker view](images/views/multi-picker-view.jpg) ## Vertical picker -You can arrange the two date range picker views in the vertical direction by setting the [navigationDirection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/navigationDirection.html) as `DateRangePickerNavigationDirection.vertical` in the `SfDateRangePicker`.` + +You can arrange the two date range picker views in the vertical direction by setting the [navigationDirection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/navigationDirection.html) as [DateRangePickerNavigationDirection.vertical](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerNavigationDirection.html#vertical) in the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html).` {% tabs %} {% highlight dart hl_lines="7" %} -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( body: SfDateRangePicker( - enableMultiView: true, - navigationDirection: DateRangePickerNavigationDirection.vertical, - viewSpacing: 10, - )), - ); -} + enableMultiView: true, + navigationDirection: DateRangePickerNavigationDirection.vertical, + viewSpacing: 10, + ), + ), + ); + } {% endhighlight %} {% endtabs %}