I am trying to create a simple appointment system where people pick specified days and see the available times that day. The times are in increments of 15 min. and are different each day, i.e. Tuesday and Thursday they start at 09:00 am - 17:00 pm and Wednesdays they start 12:30 pm - 17:00 pm.
My current setup:
table_available_days:
date_id - date
table_available_timeslots
times_id - date_id - times - availability
The problem is that for every available day I need to insert a lot of times, such as 09:00, 09:15, 09:30, 09:45, 10:00 etc. until 17:00.
After it's booked, the availability changes to 'no' to prevent double booking.
How can I design this such as to prevent inserting all the available times for every day?
@Grumpy has a good idea; to standard show all times, but hide those that have been booked. How do I do this in Js?
Right now I get the available times through AJAX and append the data. So now I need to show all available times and hide the booked ones. How to do this?
success: function (data){
$('select[name="time"]')
.append('<option value="Choose time">Choose Time</option>');
$.each (data, function (key, value){
$('select[name="time"]')
.append('<option value="'+value+'">'+ value + '</option>');
});
}