Custom calendar with Multi-select & range configurable calendar.
Some calendar is a custom widget for flutter with multiple functionality. Using this widgets we can pick both single and multi date selection. Also its support drag feature.
Setup
Add dependency to your pubspec.yaml:
some_calendar: ^{latest_version}
Basic use
First, add an import to your code:
import 'package:some_calendar/some_calendar.dart';
Setting Locale
First, add an import to your code:
import 'package:intl/intl.dart'; import 'package:intl/date_symbol_data_local.dart'; @override void initState() { initializeDateFormatting(); Intl.systemLocale = 'en_En'; // to change the calendar format based on localization super.initState(); }
with dialog
Single Mode, add to your code:
showDialog( context: context, builder: (_) => SomeCalendar( mode: SomeMode.Single, isWithoutDialog: false, selectedDate: selectedDate, labels: new Labels( dialogDone: 'Selesai', dialogCancel: 'Batal', dialogRangeFirstDate: 'Tanggal Pertama', dialogRangeLastDate: 'Tanggal Terakhir', ), startDate: Jiffy().subtract(years: 3), lastDate: Jiffy().add(months: 9), done: (date) { setState(() { selectedDate = date; showSnackbar(selectedDate.toString()); }); }, ));
Multi Mode, add to your code:
showDialog( context: context, builder: (_) => SomeCalendar( mode: SomeMode.Multi, startDate: Jiffy().subtract(years: 3), lastDate: Jiffy().add(months: 9), isWithoutDialog: false, selectedDates: selectedDates, viewMode: ViewMode.Edit, done: (date) { setState(() { selectedDates = date; showSnackbar(selectedDates.toString()); }); }, ));
Range Mode, add to your code:
showDialog( context: context, builder: (_) => SomeCalendar( mode: SomeMode.Range, startDate: Jiffy().subtract(years: 3), lastDate: Jiffy().add(months: 9), selectedDates: selectedDates, isWithoutDialog: false, viewMode: ViewMode.Edit, primaryColor: Colors.red, done: (date) { setState(() { selectedDates = date; showSnackbar(selectedDates.toString()); }); }, ));
SomeMode
SomeMode |
---|
Range |
Single |
Multi |
Parameters
parameter | types | defaultValues |
---|---|---|
primaryColor | color | Color(0xff365535) |
textColor | color | Colors.black |
selectedDate | Date | Date.now() |
selectedDates | Date[] | Date.now() + 4 days |
isWithoutDialog | bool | true |
scrollDirection | Axis | Axis.vertical |
startDate | Date | |
lastDate | Date | |
mode | SomeMode | |
viewMode | ViewMode | ViewMode.Edit |
Demo



Tags:Calendar