There I go messing with Time again
Code for a React time picker to start you off
Do you remember when I said don't mess with coding for time? I said it was a bad idea and you should avoid it at all costs. Well, even I don't listen to my good advice. Truth be told, it was a project for work. I'm working for a company that has to address scheduling appointments. This led to us building a calendar and scheduling capabilities. We decided to create a different implementation for the creation of available time slots where, instead of doing drag and drop time slot creation, we see each as a line of start and end times.
Below is a very early edition giving bare-bones capabilities built in React. Here you are able to pass the date you want to edit available time slots for (defaulting to today), create time slots (the "+" button), and delete them ( "-" button). You can change the time by clicking on the start or end time and selecting from a drop-down menu.
In the drop-down menu, you'll notice that the start time does not allow the user to select any times past its end time. This was done as a validation check for the time slot. We don't want a start time to be after an end time. I also added the duration in the drop-down menu, so when you are changing an end time, you are able to see how long after the current start time you are selecting.
There are some other features that got built out for our final product. For instance, when you have an appointment in your existing availability times and try to edit or delete such that the appointment will be lost, the user is warned and has to confirm the change. This check was important because our backend automatically sends a notification when the appointment is no longer within an available time slot. Another engineer went back and made the defaultSchedule dynamic based on the previously made time slot.
So, it's a little boilerplate for anyone that has to create a time slot picker. Change colors and styles, add things, take things out. Have some fun! A note before you start to play around since I'm using date-fns for time manipulating functions, you will have to make sure the particular date you are editing on is passed as a prop as a JS Date. Any existing schedules of availability are turned into Dates using new Date(), so using an ISO string is fine. In general, if you're getting errors about invalid types around what you think is a Date, start checking the types.
What other features would you want to add?