Calendar with a choice of "halves" of the day (for the hotel). There are ready implementations?

Question

JavaScript

Hey!

For the hotel website, you need to display a busy calendar and allow the visitor to choose free dates for booking.

I have now implemented as on the left in the picture. But this is crooked, because on the same day the previous guest can leave, and the new one can check in. So we need these triangular "halves" of days.

I reviewed a dozen jquery datapickers, I didn’t find anything even close in functionality.

If anyone solved a similar problem, please advise the most flexible plugin on which you can build a similar functionality?

Threw an example:
jsbin.com/xadomorabu/1/edit?css,js,output

Answer 1

Just fix css
::first-of-type and ::last-of-type to help you
And the plugin itself, for example here:
www.malot.fr/bootstrap-datetimepicker

Answer 2

Write your own datepicker, with courtesans and preference. It's not super hard