--- title: "Introduction to Hijri Date Range Picker in Flutter" published_at: "2021-01-06T11:23:33+00:00" modified_at: "2025-03-20T10:00:35+00:00" url: "https://www.syncfusion.com/blogs/post/introduction-to-hijri-date-range-picker-in-flutter" excerpt: "The Islamic or Hijri calendar is a lunar calendar consisting of 12 months in a year of 354 or 355 days. We have added the Hijri date picker in our 2020 Volume 4 release to display the Islamic calendar. This..." taxonomy_category: - "Desktop" - "Flutter" - "Mobile" - "Syncfusion" - "User interface" - "Web" - "What's new" taxonomy_post_tag: - "Android" - "Flutter" - "Hijri calendar" - "iOS" - "Mobile" - "UI" - "Web" - "What's New" --- # Introduction to Hijri Date Range Picker in Flutter [Nijamudeen](https://www.syncfusion.com/blogs/author/nijamudeensulaiman) ![Introduction to Hijri Date Range Picker in Flutter](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Introduction-to-Hijri-Date-Range-Picker-in-Flutter.png) The Islamic or Hijri calendar is a lunar calendar consisting of 12 months in a year of 354 or 355 days. We have added the [Hijri date picker](https://www.syncfusion.com/flutter-widgets/flutter-daterangepicker) in our [2020 Volume 4](https://www.syncfusion.com/forums/160733/essential-studio-2020-volume-4-release-v18-4-0-30-is-available-for-download) release to display the Islamic calendar. This widget has all the Gregorian calendar functionalities like minimum and maximum dates, the first day of the week, different selection modes, RTL, and customization for special dates. ![Hijri Date Range Picker in Flutter](https://www.syncfusion.com/blogs/wp-content/uploads/2020/12/Hijri-Date-Range-Picker-in-Flutter.png) Hijri Date Range Picker in Flutter ## Multiple picker views Display month, year, and decade views that allow users to easily select and navigate between built-in views using UI and programmatically. | Month view | Year view | | --- | --- | ![Decade view](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Decade-view.png) Decade view ## Date selection You can select single, multiple, and a range of dates. The widget also supports programmatic selection. | Single selection | Multiple selection | | --- | --- | | Range selection | Multi-range selection | | --- | --- | ## Programmatic date selection Select dates programmatically in the Hijri date-range picker using the selectedDate, selectedDates, selectedRange, and selectedRanges properties in HijriDatePickerController. You can also use the corresponding selectionMode to select the dates programmatically. ``` class MyAppState extends State { HijriDatePickerController _controller; @override void initState() { _controller = HijriDatePickerController(); _controller.view = HijriDatePickerView.month; _controller.selectedRanges = [ HijriDateRange(HijriDateTime.now().add(Duration(days: 4)), HijriDateTime.now().add(Duration(days: 9))), HijriDateRange(HijriDateTime.now().add(Duration(days: 11)), HijriDateTime.now().add(Duration(days: 16))) ]; super.initState(); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SfHijriDateRangePicker( selectionMode: DateRangePickerSelectionMode.multiRange, controller: _controller, )), ); } } ``` ![Programmatic date selection](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Programmatic-date-selection.png) Programmatic date selection ## First day of week The Date Range Picker widget will be rendered with Sunday as the first day of the week. You can customize it to any day using the firstDayOfWeek property. The following code example illustrates this. ``` @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SfHijriDateRangePicker( view: HijriDatePickerView.month, monthViewSettings: HijriDatePickerMonthViewSettings(firstDayOfWeek: 1), )), ); } ``` ## Appearance customization ### Month cell customization You can customize month dates, today’s date, special dates, weekend dates, blackout dates, and disabled dates in the month view of the Hijri date-range picker using the following properties: textStyle, cellDecoration, todayCellDecoration, todayTextStyle, specialDatesTextStyle, specialDatesDecoration, weekendTextStyle, weekendDatesDecoration, blackoutDatesTextStyle, blackoutDatesDecoration, disabledDatesTextStyle, and disabledDatesTextDecoration from HijriDatePickerMonthCellStyle. ``` @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), ), )), ); } ``` ![Month cell customization](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Month-cell-customization.png) Month cell customization ### Year cell customization Customize the today cell, disabled cells, and cells in year view using the following properties: textStyle, cellDecoration, todayTextStyle, todayCellDecoration, disabledDatesTextStyle, and disabledDatesDirection from HijriDatePickerYearCellStyle. ``` @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), ), )), ); } ``` ![Year cell customization](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Year-cell-customization.png) Year cell customization ## Conclusion In this blog post, we had a quick overview of the [Hijri date picker’s](https://www.syncfusion.com/flutter-widgets/flutter-daterangepicker) key features introduced in the Essential Studio® [2020 Volume 4](https://www.syncfusion.com/forums/160733/essential-studio-2020-volume-4-release-v18-4-0-30-is-available-for-download) release. You can explore other features in the Date Range Picker widget’s [documentation](https://help.syncfusion.com/flutter/daterangepicker/overview) , where you can find detailed explanations of each feature with code examples. Please feel free to try out the samples available in our [GitHub location](https://github.com/syncfusion/flutter-examples) , and share your feedback or ask questions in the comments section. You can also contact us through our [support forum](https://www.syncfusion.com/forums) , [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents) , or [feedback portal](https://www.syncfusion.com/feedback/home) . We are happy to assist you.