Custom booking calendar widget

Hello!

Recently I created custom widget for handling booking reservations. I planned to modify it further, but in the meantime found some YT tutorials, showing that I can do similar functionality without custom code.

So I'll just post this widget here, maybe someone will make use of it 🙂

You can check how it's working here:

Installation

1. Create new custom widget. Here I called it BookCalendar.

2. Add booking_calendar as a dependency:
   booking_calendar: ^1.1.9

   You can find more info about package here:

3. Copy paste code:
   

   Copy

   // Automatic FlutterFlow imports
   import '/flutter_flow/flutter_flow_theme.dart';
   import '/flutter_flow/flutter_flow_util.dart';
   import '/custom_code/widgets/index.dart'; // Imports other custom widgets
   import '/flutter_flow/custom_functions.dart'; // Imports custom functions
   import 'package:flutter/material.dart';
   // Begin custom widget code
   // DO NOT REMOVE OR MODIFY THE CODE ABOVE!
   
   import 'package:booking_calendar/booking_calendar.dart';
   import 'package:intl/date_symbol_data_local.dart';
   
   class BookCalendar extends StatefulWidget {
     const BookCalendar({
       Key? key,
       this.width,
       this.height,
     }) : super(key: key);
   
     final double? width;
     final double? height;
   
     @override
     _BookCalendarState createState() => _BookCalendarState();
   }
   
   class _BookCalendarState extends State<BookCalendar> {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Booking Calendar Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: Scaffold(
           appBar: AppBar(
             title: const Text('Booking Calendar Demo'),
           ),
           body: Center(
             child: BookingCalendar(
               bookingService: mockBookingService,
               convertStreamResultToDateTimeRanges: convertStreamResultMock,
               getBookingStream: getBookingStreamMock,
               uploadBooking: uploadBookingMock,
               pauseSlots: generatePauseSlots(),
               pauseSlotText: 'LUNCH',
               hideBreakTime: false,
               loadingWidget: const Text('Fetching data...'),
               uploadingWidget: const CircularProgressIndicator(),
               locale: 'hu_HU',
               startingDayOfWeek: StartingDayOfWeek.tuesday,
               wholeDayIsBookedWidget:
                   const Text('Sorry, for this day everything is booked'),
               //disabledDates: [DateTime(2023, 1, 20)],
               //disabledDays: [6, 7],
             ),
           ),
         ),
       );
     }
   
     final now = DateTime.now();
     late BookingService mockBookingService;
   
     @override
     void initState() {
       super.initState();
       mockBookingService = BookingService(
         serviceName: 'Mock Service',
         serviceDuration: 30,
         bookingEnd: DateTime(now.year, now.month, now.day, 18, 0),
         bookingStart: DateTime(now.year, now.month, now.day, 8, 0),
       );
     }
   
     Stream<dynamic>? getBookingStreamMock(
         {required DateTime end, required DateTime start}) {
       return Stream.value([]);
     }
   
     Future<dynamic> uploadBookingMock(
         {required BookingService newBooking}) async {
       await Future.delayed(const Duration(seconds: 1));
       converted.add(DateTimeRange(
           start: newBooking.bookingStart, end: newBooking.bookingEnd));
       print('${newBooking.toJson()} has been uploaded');
     }
   
     List<DateTimeRange> converted = [];
   
     List<DateTimeRange> convertStreamResultMock({required dynamic streamResult}) {
       // ...
       // (same as the provided template code)
       // ...
       return converted;
     }
   
     List<DateTimeRange> generatePauseSlots() {
       return [
         DateTimeRange(
           start: DateTime(now.year, now.month, now.day, 12, 0),
           end: DateTime(now.year, now.month, now.day, 13, 0),
         )
       ];
     }
   }
   
   void main() {
     initializeDateFormatting().then((_) => runApp(const BookCalendar()));
   }

And that's all!

I hope someone will make further use of it. Let me know! 😃