Is there any options or customization available / possible to have a fixed time duration block (blue block) to place it over the grid to choose the “right spot / time” as like in the screenshot example? thank you.
You can use active areas to insert blocks with custom start/end inside cells. You can find an example here (this tutorial shows how to block selected time ranges):
JavaScript Scheduler: Disabling Custom Date/Time Ranges
You can also define a custom bubble for these active areas that will show details on hover (see active area properties in the API docs).
Let me know if this is not what you are looking for.