How To Integrate Event Calendar (Sfcalendar) With Date Picker (Sfdaterangepicker) In Flutter?

Sample date Updated on Feb 15, 2024
dart daterangepicker flutter flutter-event-calendar

A quick-start example to help you to integrate Event Calendar (SfCalendar) with date picker (SfDateRangePicker) in Flutter.

You can customise the Flutter Event Calendar by integrating it with DateRangePicker controls. The Flutter Calendar's Header and ViewHeader are hidden in this example, and the DateRangePicker has been placed instead of the default header. You can move the calendar view using the onSelectionChanged callback of the Flutter date range picker control, and the picker selection will be applied based on the onViewChanged callback of the Flutter event calendar.

For more details, refer to this KB

Requirements to run the demo

How to run this application

To run this application, you need to first clone or download the ‘create a flutter maps widget in 10 minutes’ repository and open it in your preferred IDE. Then, build and run your project to view the output.

Further help

For more help, check the Syncfusion Flutter documentation, Flutter documentation.

Up arrow