Articles in this section
Category / Section

How to use Hijri date range picker (SfHijriDateRangePicker) in Flutter

1 min read

In the Flutter date range picker, you can add the Hijri date picker by using SfHijriDateRangePicker.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_datepicker/datepicker.dart';
 
void main() => runApp(HijriDatePicker());
 
class HijriDatePicker extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: Card(
            margin: const EdgeInsets.fromLTRB(50, 200, 50, 200),
            child: SfHijriDateRangePicker(
              view: HijriDatePickerView.month,
              selectionMode: DateRangePickerSelectionMode.multiple,
              selectionShape: DateRangePickerSelectionShape.rectangle,
              showNavigationArrow: true,
              selectionColor: Colors.indigoAccent,
              monthViewSettings: HijriDatePickerMonthViewSettings(
                  dayFormat: 'EEE',
                  viewHeaderStyle: DateRangePickerViewHeaderStyle(backgroundColor: Colors.tealAccent)),
              headerStyle:
                  DateRangePickerHeaderStyle(backgroundColor: Colors.teal),
            ),
          ),
        ),
      ),
    );
  }
}

View sample in GitHub

hijri calendar

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied