I have trainer Id, date, start_time, end_time. How can I avoid selecting the trainer for the pre occupied schedule??
First of all you should verify this scenario from your backend code, not in react.
Let's assume that you are using Node JS as a backend.
First thing you need to do from your react js code is to select a trainer and a specific date. Once you have selected both the fields, you will have to make an API call.
Now create one API in your backend, which verifies the whether the selected trainer is available for given date and time. So let's assume that your API name is checkTrainerAvailability.
Now write the query, if it returns the result then show an error message in your react code. If the query returns nothing that means the trainer is available.
First, we need to compare the trainer getting selected by the user and match its ID and the date with the database. if it matches then we need to take the incoming data and the date in the database as an array and divide it by 30 minutes of the time frame and store it in that variable of the database, then we need to compare both arrays and see for any duplicate records, if it has any duplicate records it means the trainer is already allotted somewhere.