syncfusion_and_flutterflow.md

How to use Syncfusion datepicker from FlutterFlow.io

Links:

• https://help.syncfusion.com/flutter/daterangepicker/getting-started
• https://docs.flutterflow.io/customizing-your-app/custom-widgets

1. Create a Custom Widget in FlutterFlow and add the code below

///Date picker imports

import 'package:syncfusion_flutter_datepicker/datepicker.dart';


class Calender extends StatefulWidget {
  const Calender({Key{NULL_SAFE_QUESTION_SENTINEL} key , this.width,this.height,this.someParama, }) : super(key: key);


  final double{NULL_SAFE_QUESTION_SENTINEL} width;
final double{NULL_SAFE_QUESTION_SENTINEL} height;
final String{NULL_SAFE_QUESTION_SENTINEL} someParama;


  @override
  _CalenderState createState() => _CalenderState();
}


class _CalenderState extends State<Calender>  {


  @override
  Widget build(BuildContext context) {
     return Scaffold(
         body: Container(
         child: SfDateRangePicker(
           monthCellStyle: DateRangePickerMonthCellStyle(
           weekendDatesDecoration: BoxDecoration(
               color: Colors.grey,
               border: Border.all(color: Colors.grey,
                    width: 1),
               shape: BoxShape.rectangle),
           specialDatesDecoration: BoxDecoration(
                color: Colors.green,
                border: Border.all(color: const Color(0xFF2B732F), width: 1),
                shape: BoxShape.circle),
           blackoutDatesDecoration: BoxDecoration(
                color: Colors.red,
                border: Border.all(color: const Color(0xFFF44436), width: 1),
                shape: BoxShape.circle),
         		),
          selectionMode: DateRangePickerSelectionMode.multiRange,
          monthViewSettings: DateRangePickerMonthViewSettings(
firstDayOfWeek: 1,
             weekendDays: [6,7],
             blackoutDates: <DateTime>[DateTime(2022, 05, 26)],
             specialDates: <DateTime>[DateTime(2022, 05, 20), DateTime(2022, 05, 16), DateTime(2022,05,17)],
          		showWeekNumber: true,
          		weekNumberStyle: DateRangePickerWeekNumberStyle(
              	textStyle: TextStyle(fontStyle: FontStyle.italic),
              	backgroundColor: Colors.purple),
           ),
  )));
  }
}

2. Add the dependencies:

3. Compile and Preview

Hey there I am curious if you are able to add the syncfusion event calendar to flutter flow or is that not a possibility i cant get it to compile properly.

Hey there I am curious if you are able to add the syncfusion event calendar to flutter flow or is that not a possibility i cant get it to compile properly.

@Lapdawg24 I've paused my flutterflow work for a while (a lot of stuff at work), but one of the issues was incompability between flutterflow and latest versions of syncfusion. The solution was to lower the version of syncfusion - and that worked actually. Flutterflow is now on version 3.x of Flutter so those issues should have been fixed.

Raising a support ticket with Flutterflow should help, they usually respond within a day or two (which I don't).