feat: add availability creation screen for selected time range

packages/flutter_availability/lib/src/screens/availability_overview.dart

@@ -12,6 +12,7 @@ class AvailabilityOverview extends StatefulWidget {
     required this.options,
     required this.onDayClicked,
     required this.onAvailabilityClicked,
+    required this.onDaysSelected,
     super.key,
   });
 
@@ -30,6 +31,10 @@ class AvailabilityOverview extends StatefulWidget {
   /// Callback for when the user clicks on an availability
   final void Function(AvailabilityModel availability) onAvailabilityClicked;
 
+  /// Callback for when the user selects days in the calendar to fill in
+  /// availability for
+  final void Function(DateTimeRange selectedRange) onDaysSelected;
+
   @override
   State<AvailabilityOverview> createState() => _AvailabilityOverviewState();
 }
@@ -148,6 +153,28 @@ class _AvailabilityOverviewState extends State<AvailabilityOverview> {
                   widget.options.translations.addAvailableDayButtonText,
                 ),
               ),
+              const SizedBox(height: 8),
+              ElevatedButton(
+                onPressed: () async {
+                  // ask the user to select a date
+                  var dateRange = await showDateRangePicker(
+                    context: context,
+                    firstDate:
+                        DateTime.now().subtract(const Duration(days: 365)),
+                    lastDate: DateTime.now().add(const Duration(days: 365)),
+                  );
+
+                  if (dateRange == null) {
+                    return;
+                  }
+                  // use the callback with all the selected dates
+                  widget.onDaysSelected(dateRange);
+                },
+                child: const Text("Give an availability for a date range"),
+              ),
+              const SizedBox(
+                height: 8,
+              ),
               ElevatedButton(
                 onPressed: () async {
                   // ask the user to select a date

packages/flutter_availability/lib/src/screens/availability_select.dart

@@ -0,0 +1,58 @@
+import "package:flutter/material.dart";
+import "package:intl/intl.dart";
+
+///
+class AvailabilitySelectionScreen extends StatelessWidget {
+  ///
+  const AvailabilitySelectionScreen({
+    required this.selectedDates,
+    required this.onTemplateSelectClicked,
+    super.key,
+  });
+
+  /// The selected [DateTimeRange] for which the user is selecting availability
+  final DateTimeRange selectedDates;
+
+  /// Callback for when the user selects a template and should return a
+  /// templateid or null
+  final Future<String?> Function() onTemplateSelectClicked;
+
+  @override
+  Widget build(BuildContext context) {
+    void onClickNext() {}
+
+    Future<void> onClickSelectTemplate() async {
+      var selectedTemplate = await onTemplateSelectClicked();
+      debugPrint(selectedTemplate);
+    }
+
+    return Padding(
+      padding: const EdgeInsets.all(16.0),
+      child: Stack(
+        children: [
+          Column(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              const Text("When"),
+              Text(
+                "From ${DateFormat.yMd().format(selectedDates.start)} till"
+                " ${DateFormat.yMd().format(selectedDates.end)}",
+              ),
+              FilledButton(
+                onPressed: onClickSelectTemplate,
+                child: const Text("Select a template"),
+              ),
+            ],
+          ),
+          Align(
+            alignment: Alignment.bottomCenter,
+            child: ElevatedButton(
+              onPressed: onClickNext,
+              child: const Text("Next"),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

packages/flutter_availability/lib/src/userstory/navigator_userstory.dart

@@ -1,6 +1,7 @@
 import "package:flutter/material.dart";
 import "package:flutter_availability/src/screens/availability_day_overview.dart";
 import "package:flutter_availability/src/screens/availability_overview.dart";
+import "package:flutter_availability/src/screens/availability_select.dart";
 import "package:flutter_availability/src/service/local_service.dart";
 import "package:flutter_availability/src/userstory/userstory_configuration.dart";
 import "package:flutter_availability_data_interface/flutter_availability_data_interface.dart";
@@ -8,20 +9,20 @@ import "package:flutter_availability_data_interface/flutter_availability_data_in
 ///
 Widget availabilityNavigatorUserStory(
   BuildContext context, {
-  AvailabiltyUserstoryConfiguration? configuration,
+  AvailabilityUserstoryConfiguration? configuration,
 }) =>
-    _availabiltyScreenRoute(
+    _availabilityScreenRoute(
       context,
       configuration ??
-          AvailabiltyUserstoryConfiguration(
+          AvailabilityUserstoryConfiguration(
             service: LocalAvailabilityDataInterface(),
             getUserId: (_) => "no-user",
           ),
     );
 
-Widget _availabiltyScreenRoute(
+Widget _availabilityScreenRoute(
   BuildContext context,
-  AvailabiltyUserstoryConfiguration configuration,
+  AvailabilityUserstoryConfiguration configuration,
 ) =>
     SafeArea(
       child: Scaffold(
@@ -31,7 +32,7 @@ Widget _availabiltyScreenRoute(
           userId: configuration.getUserId(context),
           onDayClicked: (date) async => Navigator.of(context).push(
             MaterialPageRoute(
-              builder: (context) => _avaibiltyDayOverviewRoute(
+              builder: (context) => _availabilityDayOverviewRoute(
                 context,
                 configuration,
                 date,
@@ -42,7 +43,7 @@ Widget _availabiltyScreenRoute(
           onAvailabilityClicked: (availability) async =>
               Navigator.of(context).push(
             MaterialPageRoute(
-              builder: (context) => _avaibiltyDayOverviewRoute(
+              builder: (context) => _availabilityDayOverviewRoute(
                 context,
                 configuration,
                 availability.startDate,
@@ -50,13 +51,22 @@ Widget _availabiltyScreenRoute(
               ),
             ),
           ),
+          onDaysSelected: (selectedDates) async => Navigator.of(context).push(
+            MaterialPageRoute(
+              builder: (context) => _availabilitySelectionOverviewRoute(
+                context,
+                configuration,
+                selectedDates,
+              ),
+            ),
+          ),
         ),
       ),
     );
 
-Widget _avaibiltyDayOverviewRoute(
+Widget _availabilityDayOverviewRoute(
   BuildContext context,
-  AvailabiltyUserstoryConfiguration configuration,
+  AvailabilityUserstoryConfiguration configuration,
   DateTime date,
   AvailabilityModel? availability,
 ) =>
@@ -73,3 +83,18 @@ Widget _avaibiltyDayOverviewRoute(
         ),
       ),
     );
+
+Widget _availabilitySelectionOverviewRoute(
+  BuildContext context,
+  AvailabilityUserstoryConfiguration configuration,
+  DateTimeRange selectedDates,
+) =>
+    SafeArea(
+      child: Scaffold(
+        appBar: AppBar(),
+        body: AvailabilitySelectionScreen(
+          selectedDates: selectedDates,
+          onTemplateSelectClicked: () async => null,
+        ),
+      ),
+    );

packages/flutter_availability/lib/src/userstory/userstory_configuration.dart

@@ -3,9 +3,9 @@ import "package:flutter_availability/src/config/availability_options.dart";
 import "package:flutter_availability_data_interface/flutter_availability_data_interface.dart";
 
 ///
-class AvailabiltyUserstoryConfiguration {
+class AvailabilityUserstoryConfiguration {
   ///
-  const AvailabiltyUserstoryConfiguration({
+  const AvailabilityUserstoryConfiguration({
     required this.service,
     required this.getUserId,
     this.options = const AvailabilityOptions(),