The grid cells start at 12:00 (noon) and end at 12:00 (noon) the next day. Your events start and end at 00:00.
You need to align the start with the grid.
1. You can store the real checkin/checkout time in the database with the date (use date/time) field.
2. If you just store the dates in the database, add 12 hours before sending the data to the client side.
This is the first -12h shift. The second -12h shift happens because you are using .useEventBoxes = "Always", the default value:
http://doc.daypilot.org/scheduler/exact-event-duration/
You can see the real event duration highlighted by the orange/red part of the duration bar. You can see that it corresponds to the data sent from the database. The light blue part of the bar is the alignment.
If you take a look at the tutorial you will see that it uses approach #1, it stores the full date/time in the database:
http://code.daypilot.org/27453/html5-hotel-room-booking-javascript-php