Selecting multiple hour ranges per day on mobile device

Business requirements:

Our company provides services. A service has a start time and a duration. Customers can book a service only when one of our employees is available, thus our employees must have a way to set their availability during the day.

I am creating a (web) mobile app for our employees and I am wondering what the best way is to implement such a feature.

Currently our solution is not user-friendly. The user picks a date (from a calendar) and fills two inputs: start hour and end hour. The problem is that the user doesn't have a clear view (visually) how his day looks like and because of this they add multiple overlapping availabilities, they are confused sometimes, because they didn't notice they are available at some point in time etc.

I came up with two ideas:
The first one is based on multiselect with hourly ranges:

The second one is more custom:

Do you have any other ideas? The primary goal is that it must be easily accessible on mobile devices; forget about the desktop.