How to Create a Dynamic Booking Calendar with Drag-and-Drop Functionality in FlutterFlow?

Widgets & Design

Hi,

I’m looking for guidance on creating a booking calendar similar to the one in the attached screenshot. Here are the specific features I need:

1. Dynamic Court Display:

• Courts like Padel 1, Padel 2, etc., should be fetched from a database.

2. User-Defined Operating Hours:

• Display hours on the left side of the calendar based on user-defined operating hours, e.g., from 9:00 AM to 10:00 PM, which are also stored in the database.

3. Drag-and-Drop Booking Functionality:

• Allow users to book a time slot for a court.

• Enable users to drag and drop bookings to different time slots (e.g., moving a booking from 9:00 AM to 10:00 AM to 12:00 - 13:00 AM).

Has anyone implemented something similar in FlutterFlow? Any tips or examples would be greatly appreciated!

What have you tried so far?

I don't know what can I do.

Did you check FlutterFlow's Documentation for this topic?
Yes
1 reply